Approach 2: GTM Custom HTML Tags

Who this is for: Marketing or analytics practitioners who manage tags via Google Tag Manager and do not have (or need) direct access to the site's code.

Overview

In this approach, both the GA4 tracking snippet and the ClickMint script are installed as Custom HTML tags inside your GTM container. Your existing built-in GA4 Configuration tag (or Google Tag) is replaced with a raw gtag.js Custom HTML tag.

Why replace the built-in GA4 tag? GTM's managed GA4 tags process dataLayer pushes internally. ClickMint needs direct, unfiltered access to window.dataLayer and gtag() — which is only guaranteed when GA4 is loaded via the raw snippet, not through GTM's adapter.

💡 Alternative: If you have a complex GTM setup (server-side GTM, Consent Mode v2, multiple GA4 destinations) and replacing your GA4 tag feels risky, consider Approach 3: GTM Serverless Configuration instead. It allows ClickMint to work alongside your existing Google Tag without replacing it.

Prerequisites

Before starting, have the following ready:

• GTM container access — Editor or Publish permission.
• GA4 Measurement ID — found in GA4 → Admin → Data Streams → Web → Measurement ID. Format: G-XXXXXXXXXX.
• ClickMint Org ID — found in your ClickMint dashboard → Settings → Organization. Use only the part after org_ in the script URL (e.g., org_abc123 → abc123).

Core GTM Setup

Step 1 — Create the GA4 Custom HTML tag

1. In GTM, go to Tags → New.
2. Name it: ga4 html install (or a name that's clear in your container).
3. Under Tag Configuration, choose Custom HTML.
4. Paste the following, replacing G-XXXXXXXXXX with your Measurement ID:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag('js', new Date())
  gtag('config', 'G-XXXXXXXXXX')
</script>

5. Under Triggering, select Initialization - All Pages.
6. Click Save.

Step 2 — Create the ClickMint Custom HTML tag

1. In GTM, go to Tags → New.
2. Name it: cm script (or similar).
3. Under Tag Configuration, choose Custom HTML.
4. Paste the following, replacing YOUR_ORG_ID with your org's identifier:

<script>
  ;(function () {
    var currentPath = location.pathname
    var previewStorageKey = 'cm_preview_' + currentPath
    var referrerStorageKey = 'cm_referrer_' + currentPath
    var params = new URLSearchParams(location.search)
    var previewParam = params.get('cm_preview')
    var referrerParam = params.get('cm_referrer')

    if (previewParam) {
      localStorage.setItem(previewStorageKey, previewParam)
    }
    if (referrerParam) {
      localStorage.setItem(referrerStorageKey, referrerParam)
    }

    var baseUrl = 'https://experiments.api.clickmint.com/YOUR_ORG_ID' + currentPath
    var queryParts = []

    var storedPreview = localStorage.getItem(previewStorageKey)
    if (storedPreview) {
      queryParts.push('cm_preview=' + encodeURIComponent(storedPreview))
    }

    var storedReferrer = localStorage.getItem(referrerStorageKey)
    if (storedReferrer) {
      queryParts.push('cm_referrer=' + encodeURIComponent(storedReferrer))
    }

    var scriptUrl = baseUrl + (queryParts.length > 0 ? '?' + queryParts.join('&') : '')
    var script = document.createElement('script')
    script.async = true
    script.src = scriptUrl
    ;(document.head || document.documentElement).appendChild(script)
  })()
</script>

5. Under Triggering, select Initialization - All Pages.
6. Click Save.

Step 3 — Disable or pause the existing GA4 Configuration tag

⚠️ This step is critical. If your existing built-in GA4 tag continues to fire alongside the new Custom HTML tag, you will have two GA4 configurations running simultaneously — causing duplicate events and inflated session counts.

1. In GTM, go to Tags.
2. Find any tag of type Google Analytics: GA4 Configuration, Google Tag, or Google Analytics: App + Web Configuration targeting the same Measurement ID.
3. Click the tag name → click More actions (⋮) → Pause (or delete if you're certain it's no longer needed).
4. If this tag is referenced by GA4 Event tags, those Event tags will need to be updated — see the note below.

⚠️ GA4 Event tags linked to the GA4 Configuration tag: If you have "Google Analytics: GA4 Event" tags that use the built-in connector to reference your GA4 Configuration tag, they may stop working after you pause it. Test all active event tags in GTM Preview mode after making this change.

Step 4 — Preview and publish

1. Click Preview in GTM.
2. Visit a page on your site that has an active experiment.
3. In the Tag Assistant panel, confirm:
   • Your ga4 html install tag fires on Initialization - All Pages.
   • Your cm script tag fires on Initialization - All Pages.
   • No other GA4 Configuration or Google Tag is firing for the same Measurement ID.
4. Check the browser console for [ClickMint] User properties set for conversion tracking.
5. In GA4 DebugView, confirm a cm_tracking event appears with experiment_id and outcome_id parameters.
6. Once verified, click Submit in GTM to publish.

Platform-Specific Notes

The core setup above covers GTM itself. If you use any of the platforms below alongside GTM, refer to these additional notes.

Microsoft Clarity

No changes needed in Clarity. Microsoft Clarity is a behavioral analytics tool (heatmaps, session recordings). It does not manage GA4 — the two are independent systems.

• If GA4 appears under Clarity → Settings → Third-Party Integrations, that is a data linking feature (matching Clarity sessions with GA4 sessions), not a GA4 injection method. You can keep it enabled.
• If you use the Clarity GTM template tag, it only injects the Clarity snippet — your GA4 Custom HTML tag is separate and unaffected.

Segment (Twilio Segment)

Why action is needed: Segment's built-in "Google Analytics 4 Web" destination uses Segment's own analytics.js library to translate calls into GA4 events. This routes GA4 data through Segment's abstraction layer, which blocks ClickMint's direct access to window.dataLayer.

1. Log in to Segment.
2. Go to Connections → Destinations.
3. Find Google Analytics 4 Web → set it to Disabled for the relevant source.
4. Proceed with the Core GTM Setup above to install GA4 as a Custom HTML tag in GTM.
5. Keep Segment running for your other destinations (Meta, Klaviyo, etc.) — only the GA4 destination needs to change.

💡 E-commerce events via Segment: If Segment was automatically forwarding events like Order Completed to GA4, you will need to set those up separately. Use GTM Data Layer pushes or gtag() calls to fire the equivalent GA4 e-commerce events (purchase, add_to_cart, etc.). See GA4 ecommerce documentation.

PostHog

No changes needed in PostHog. PostHog is a product analytics suite that operates independently of GA4.

• PostHog's data pipeline exports (BigQuery, GA4 Measurement Protocol) don't affect client-side dataLayer access.
• If a PostHog plugin was injecting GA4 on your behalf, disable that plugin and use the Core GTM Setup instead.

Adobe Experience Platform Tags

Why action is needed: Adobe's GA4 extension manages gtag() calls internally, similar to GTM's built-in GA4 tag.

1. Log in to Adobe Experience Platform Data Collection.
2. Open your Tag Property.
3. Go to Rules → create a new page-load rule (or edit your existing one).
4. Under Actions, add a new action:
   • Extension: Core
   • Action Type: Custom Code — HTML
5. Paste the full GA4 snippet (from Step 1 above).
6. Set the rule order to a low number (e.g., 1) so it fires first.
7. Disable or remove the existing Adobe GA4 extension configuration action.
8. Add a second action for the ClickMint snippet (same rule, action order after GA4).
9. Build and publish to your library.

Tealium iQ

Why action is needed: Tealium's "Google Analytics 4" tag template manages the gtag() integration internally.

1. Log in to Tealium iQ Tag Management.
2. Go to your profile → Tags.
3. Pause or remove the built-in "Google Analytics 4" tag.
4. Add a new tag:
   • Tag Type: Custom Container (or "Advanced JavaScript Code")
5. Paste the full GA4 snippet.
6. Add a second tag (same type) for the ClickMint snippet.
7. Set both Load Rules to "All Pages". Configure load order: GA4 first, ClickMint second.
8. Save & Publish.

Shopify + GTM

Shopify does not natively support GTM on all plans, but most themes include a GTM container ID field or allow custom code injection via the theme editor.

If your theme supports a GTM Container ID field:

1. Add your GTM container ID in Online Store → Preferences → Google Analytics (if the field exists) or in your theme's settings panel.
2. Then follow the Core GTM Setup above — both tags will fire on your storefront pages.

If your theme does not have a GTM field:

1. Edit layout/theme.liquid to add the GTM snippet manually to <head> and <body>.
2. Then follow the Core GTM Setup above.

⚠️ Shopify Pixels (Customer Events) cannot be used for the GA4 base tag. Shopify Pixels run in a sandboxed iframe — window.dataLayer on the main page is not accessible from inside the sandbox. Always install GA4 via GTM or directly in theme.liquid.

⚠️ For checkout tracking (Shopify Plus): GTM fires on all storefront pages but not on checkout.liquid unless you explicitly add the GTM snippet there too. Non-Plus merchants: use Shopify's Web Pixels with the Measurement Protocol for server-side checkout events.

Klaviyo

No changes needed in Klaviyo. Klaviyo's JavaScript (klaviyo.js) operates independently of GA4. Its Google Analytics integration functions via UTM parameters only — it does not manage client-side dataLayer.

Ensure GA4 is installed via the Core GTM Setup above. No additional Klaviyo configuration is required.

Triple Whale

No changes needed in Triple Whale unless it is currently injecting GA4 on your behalf.

• Triple Whale's pixel operates independently of GA4.
• If Triple Whale is managing your GA4 injection (check Settings → Integrations → Google Analytics), disable the client-side injection option and set it to data-import only.
• Proceed with the Core GTM Setup once Triple Whale's GA4 injection is disabled.

Elevar

Why action is needed: Elevar provisions its own GTM container and manages a GA4 Configuration tag through it. The GA4 Configuration tag needs to be paused and replaced with a Custom HTML tag — but Elevar's Data Layer enrichment tags should stay active.

1. Log in to Elevar and access the GTM container Elevar created for your site.
2. Follow the Core GTM Setup to add both Custom HTML tags to that container.
3. Pause Elevar's GA4 Configuration tag (Tag Type: Google Analytics: GA4 Configuration or Google Tag) — but keep all Elevar Data Layer tags active. Elevar's data layer enrichment (enhanced e-commerce events, user properties) is valuable and does not need to change.
4. Preview and test thoroughly — Elevar's container may have many event tags referencing the GA4 Configuration tag. Check each in Preview mode.

💡 Alternative: If modifying Elevar's container feels risky, consider Approach 3: GTM Serverless Configuration. Approach 3 keeps the existing Google Tag active and layers ClickMint's tracking on top via a dedicated GA4 Event tag — no changes to Elevar's setup are required.

Verifying Your Setup

Step 1 — GTM Preview Mode

1. In GTM, click Preview.
2. Visit a page with an active ClickMint experiment.
3. In Tag Assistant, confirm:
   • ga4 html install fires on Initialization - All Pages ✓
   • cm script fires on Initialization - All Pages ✓
   • No other GA4 Configuration or Google Tag fires for the same Measurement ID ✓

Step 2 — Check for duplicate GA4 snippets

In the browser console:

document.querySelectorAll('script[src*="googletagmanager.com/gtag/js"]').length

This should return 1. If it returns 2 or more, find and remove the duplicate.

Step 3 — Confirm cm_tracking in GA4 DebugView

1. In GA4, go to Admin → DebugView.
2. Navigate to a page with an active experiment.
3. Look for a cm_tracking event.
4. Expand it and verify: experiment_id, outcome_id, outcome_type, event_type are all present.

Step 4 — Confirm user property

In the browser console:

window.dataLayer.filter((e) => e[0] === 'set')

You should see an entry with user_properties: { experiment_id: 'cm_...' }.

Troubleshooting