Bookmark Analytics Integrations: Setup Guide | OpsBlu Docs

Bookmark Analytics Integrations: Setup Guide

Integrate GA4, GTM, and Meta Pixel with Bookmark's AI website builder using the Custom Code feature and built-in analytics settings.

Bookmark is an AI-powered website builder (using its AIDA AI assistant) that generates sites from templates. Like most hosted website builders, Bookmark provides limited access to the underlying HTML. Analytics integration relies on Bookmark's built-in code injection features and the platform's native analytics settings.

Integration Architecture

Bookmark provides two integration paths:

  1. Built-in Analytics -- Navigate to My Sites > Settings > Analytics to enter a Google Analytics tracking ID directly. This provides basic pageview tracking with no code editing.
  2. Custom Code Injection -- On the Business plan and above, navigate to My Sites > Settings > Custom Code to add arbitrary HTML/JavaScript to the site's <head> or <body> sections.

There is no plugin system, no theme editor, no template file access, and no API for programmatic script injection.

Available Integrations

Analytics Platforms

Google Analytics 4

  • Built-in Analytics setting (Measurement ID only, basic pageviews)
  • Custom Code injection with full gtag.js (Business plan required)
  • GTM-based GA4 (Business plan required)

Tag Management

Google Tag Manager

  • Custom Code head/body injection (Business plan required)
  • Not available on Starter or Free plans

Marketing Pixels

Meta Pixel

  • Custom Code head injection (Business plan required)
  • Via GTM container (Business plan required)

Custom Code Integration (Business Plan)

On the Business plan, navigate to My Sites > Settings > Custom Code. Bookmark provides two fields:

Header Code:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXX');</script>

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'platform': 'bookmark',
  'pageTitle': document.title,
  'pagePath': window.location.pathname
});
</script>

Footer Code:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Platform Limitations

Plan-gated code injection. The Custom Code feature is only available on the Business plan ($11.99/month and up). Free and Starter plan users can only use the built-in Analytics ID field, which supports basic GA4 pageview tracking but no GTM, no Meta Pixel, and no custom events.

No page-level code injection. Custom Code applies site-wide. You cannot add different tracking scripts to specific pages. All pages receive the same head/body code.

No data layer access. Bookmark does not expose page metadata (page type, category, product data) to JavaScript. The data layer is limited to what you can extract from the DOM at runtime -- document.title, window.location, and any visible page content.

No ecommerce data layer. Bookmark's built-in ecommerce does not push cart, checkout, or purchase events to a data layer. Purchase tracking requires scraping confirmation page DOM elements or using external integrations to forward order data.

No server-side access. There is no backend, API, or webhook system for server-side analytics. All tracking is client-side only.

Performance Considerations

  • Builder overhead. Bookmark sites include the platform's own JavaScript framework, which adds 200-400KB of baseline scripts. Additional tracking scripts load on top of this.
  • No async control. The Custom Code injection does not let you specify script loading attributes (async, defer). Scripts are injected as-is. GTM's own async loading mitigates this for tags managed within the container.
  • Image-heavy templates. Bookmark's AI-generated designs often include large hero images and carousels. Tracking scripts compete with image loading for bandwidth.
  • Mobile performance. Bookmark generates responsive layouts, but the combined weight of the builder framework plus tracking scripts can push mobile page loads above 3 seconds on slower connections.
  1. Upgrade to Business plan (if not already) to access Custom Code
  2. Install GTM via Custom Code -- Single container for all tracking
  3. Configure GA4 in GTM -- Use DOM scraping triggers for page-specific data since no data layer is available
  4. Add Meta Pixel via GTM -- Standard pageview tracking; custom events require DOM-based triggers

Next Steps

For general integration concepts, see the integrations overview.

返回顶部