# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.maker.co/introduction/faq/analytics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
