> ## Documentation Index
> Fetch the complete documentation index at: https://developer.cashbackhive.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Tag Manager

> Load the Cashback Hive SDK through a Google Tag Manager Custom HTML tag when you cannot edit the site source, including a copy-paste tag and trigger setup.

If your team manages third-party scripts through Google Tag Manager, you can load the SDK with a **Custom HTML** tag.

> [!WARNING]
>
> Load the SDK **either** through GTM **or** directly in your HTML — not both. Loading it twice is harmless (the second copy is ignored) but wasteful. The snippet below includes a guard just in case.

**1. Create a Custom HTML tag**

In your container, go to **Tags → New → Tag Configuration → Custom HTML** and paste:

```html theme={null}
<script>
  (function () {
    var SRC = "https://sdk.cashbackhive.com/sdk.js";
    if (document.querySelector('script[src="' + SRC + '"]')) return;

    var s = document.createElement("script");
    s.src = SRC;
    s.async = true;
    s.setAttribute("data-key", "cbh_pk_your_publishable_key");
    document.head.appendChild(s);
  })();
</script>
```

Replace `cbh_pk_your_publishable_key` with your property's publishable key.

**2. Set the trigger**

Choose **Initialization – All Pages** (or **All Pages** if your container doesn't have the initialization trigger). The SDK should load on every page where you'll use it.

If you only use the SDK on specific pages (e.g. `/deals`), use a **Page View** trigger with a path condition instead.

**3. Preview, then publish when ready**

Use GTM's **Preview** mode to test on your site. On an allowed origin, open the browser console and confirm:

```js theme={null}
window.CashbackHive.initialized // true
```

Publish the container only after you've verified the integration — the SDK won't load for visitors until you do.

## Using the SDK from other tags

Other Custom HTML tags can use the SDK too. Because tag execution order isn't guaranteed, always wait for readiness:

```html theme={null}
<script>
  (function () {
    function onReady(sdk) {
      sdk.on("click", function (e) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({ event: "cbh_offer_click", cbh_slug: e.slug });
      });
    }

    var sdk = window.CashbackHive;
    if (sdk && sdk.initialized) {
      onReady(sdk);
    } else {
      window.addEventListener("cbh:ready", function (e) { onReady(e.detail.sdk); });
    }
  })();
</script>
```

This example forwards SDK click events into the `dataLayer` so they can drive other GTM tags.

## Notes

* GTM's Custom HTML tags run as regular page scripts, so the SDK behaves identically to a direct install. The same [allowed-origin](https://developer.cashbackhive.com/concepts/keys-and-origins.md) and [CSP](https://developer.cashbackhive.com/guides/content-security-policy.md) rules apply.
* The `document.currentScript` the SDK reads `data-key` from is the element created above, not the GTM container script, so auto-initialisation works normally.
* If your GTM setup uses a consent mode that delays tags until consent is granted, the SDK will simply initialise later and `cbh:ready` will fire then. Code that follows the readiness pattern above handles this automatically.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.