# Analytics

## 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):

1. **Add your trackers to the Maker project** (inject scripts into the page).
2. **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:\
\&#xNAN;**“Add the following tracking snippet to the `<head>` of every page in this Maker project.”**

#### Example: Meta (Facebook) Pixel

```html
<!-- 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

```html
<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

```html
<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)&#x20;

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.
