Analytics

Maker doesn’t have analytics built in (yet); however, your site’s existing trackers can still capture events, depending on how the project goes live.

How analytics behave by the publish method

1- Simple Embed or Custom Domain Integration

When Maker content is added via Simple Embed or a Custom Domain integration, it’s injected directly into your page’s DOM and behaves like any native element. Any trackers or heat-mapping tools already on your site (Google Analytics/GA4, GTM, Segment, Mixpanel, Hotjar, Clarity, etc.) will automatically record page views, clicks, and conversions.

2- iFrame Embed or Maker-Hosted URL

When Maker content is loaded in an iframe or published on a Maker-generated URL, it runs in a separate browsing context:

On an iframe, scripts on the parent page cannot see inside the frame, so interactions are not logged by default.
On a Maker-hosted URL, your site’s trackers aren’t present unless you add them.

To capture analytics in these cases, choose one (or both):

Add your trackers to the Maker project (inject scripts into the page).
Bridge events with postMessage from the iframe to the parent page, then log them with the parent’s trackers.

Examples for iFrame Embed or Maker-Hosted URL

Use a prompt/instruction like: “Add the following tracking snippet to the <head> of every page in this Maker project.”

Example: Meta (Facebook) Pixel

<!-- Meta Pixel -->
<script>
  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
  n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
  document,'script','https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>

Example: Google Ads

<!-- Google tag (gtag.js) -->
<script async src=""></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  // Google Ads account
  gtag('config', 'AW-XXXXXXXXX'); // replace with your Google Ads ID
</script>

Bridge iframe events with `postMessage`

In the Maker (iframe) page — send events

<script>
  // send a custom event to the parent page
  function sendEvent(eventName, payload = {}) {
    window.parent.postMessage(
      { source: 'maker', type: 'track', event: eventName, payload },
      '*'
      // For security, replace '*' with your parent origin, e.g., 'https://www.example.com'
    );
  }

  // Example: call on CTA click
  document.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-cta="hero"]');
    if (btn) sendEvent('hero_cta_click', { label: 'Hero CTA', variant: 'A' });
  });
</script>

On the parent page — receive and log

<script>
  window.addEventListener('message', (e) => {
    // Optionally restrict by origin: if (e.origin !== 'https://your-maker-host.com') return;
    const msg = e.data || {};
    if (msg.source !== 'maker' || msg.type !== 'track') return;

    // GA4 (gtag)
    if (typeof gtag === 'function') {
      gtag('event', msg.event, msg.payload || {});
    }

    // Segment
    if (window.analytics && typeof analytics.track === 'function') {
      analytics.track(msg.event, msg.payload || {});
    }

    // Mixpanel
    if (window.mixpanel && typeof mixpanel.track === 'function') {
      mixpanel.track(msg.event, msg.payload || {});
    }
  });
</script>

Tips

Prefer a specific targetOrigin in postMessage (not '*') once you know the parent domain.
Standardize an event naming convention (e.g., snake_case or camelCase).
Ensure cookie/consent settings align with your CMP (especially across domains).
If third-party cookies are restricted, cross-domain sessions may fragment; consider first-party GA4 tagging or server-side tagging.

Tracker verification (recommended)

Users can install this plugin to check whether trackers are integrated properly and are firing on the page.

Before launch, confirm that all required analytics/pixel tags are installed and firing correctly.

Install a Chrome extension such as Taghound: Analytics/GTM/Pixel Helper to inspect tags and events: https://chromewebstore.google.com/detail/taghound-analyticsgtmpixe/canpneabbfipaelecfibpmmjbdkiaolf
Load the page and walk through key flows (page view, add to cart, checkout/purchase).
In the extension panel, verify that GA4/GTM/Meta Pixel (and any other trackers) load and that the expected events fire once with the correct parameters (e.g., currency, value, content IDs).
If your content is in an iframe or on a Maker-generated URL, run the extension on that page as well (or ensure you’re sending events via postMessage to the parent page if needed).
If something doesn’t appear, check: tag installation, consent settings, ad-blockers, and GTM Preview/DebugView for errors.

PreviousStyle Guide NextPlans & Billing

Last updated 1 month ago

Was this helpful?