Approach 1: Direct / Native Script Installation

ClickMint CRO Platform — Client Documentation Last updated: April 2026

Who this is for: teams that already install GA4 directly in site code (or can do so) and can place the ClickMint script directly in the page <head>.

← GA4 Experiment Tracking: Setup Hub

Overview

This is the simplest and fastest ClickMint installation pattern.

If your site already loads GA4 directly with gtag.js in templates, theme files, or application code, you usually only need to add the ClickMint script directly after GA4 in the page <head>.

Because the script loads before the page finishes rendering, this approach gives ClickMint the best chance to apply experiments early and avoid visible flashes of the original page.

When to use this approach

Use this guide if all of the following are true:

GA4 already lives directly in your site code, or you can install it there
You can edit the page <head> or a CMS setting that writes into <head>
You do not need GTM / sGTM to own the ClickMint tracking flow

If your GA4 setup is managed by GTM, server-side GTM, Consent Mode v2, Elevar, or another vendor-managed stack, use Approach 2: GTM Serverless Event Tracking instead.

Prerequisites

Before starting, make sure you have:

Completed GA4 Experiment Tracking Setup so the cm_tracking event and custom dimensions are already registered
Your GA4 Measurement ID (G-XXXXXXXXXX) if you still need to install GA4 directly
Your ClickMint org token / script identifier from ClickMint support or your team representative
- In many accounts this is the same value as the portion after org_
Access to edit your site's theme, layout, or head-injection setting

Load order and placement rules

Follow these rules exactly:

GA4 first — gtag.js (or your existing direct GA4 install) must load before ClickMint
ClickMint second — place the ClickMint script immediately after GA4
Both belong in <head> — not in the footer, not at the end of <body>, and not behind late-loading UI plugins

Why this matters:

ClickMint needs gtag() / dataLayer available when it runs
Head placement reduces the chance of a delayed experiment assignment
Footer placement increases the risk of a visible flash of the unmodified page

If your site cannot meet those rules, switch to Approach 2.

ClickMint script snippet

Replace YOUR_ORG_TOKEN with the token or org-identifier suffix provided by ClickMint:

<!-- ClickMint experiment script -->
<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_TOKEN' + 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>

If GA4 is not yet installed directly on the page: add your standard gtag.js snippet first, then place the ClickMint snippet immediately below it.

Platform-specific instructions

Shopify

Best path: install the ClickMint script in layout/theme.liquid, directly before </head>, immediately after your existing GA4 snippet.

Go to Shopify Admin → Online Store → Themes
Click … → Edit code on the active theme
Open layout/theme.liquid
Find </head>
Paste the ClickMint script just before </head> and just after your existing GA4 code

If GA4 is currently only running through GTM or Shopify Pixels, use Approach 2 instead of this guide.

Shopify Plus: if you need experiment delivery on checkout pages, coordinate separately with your implementation team. Storefront theme placement covers standard non-checkout pages.

WordPress

You have two common options:

Option A — theme or child theme

Add the ClickMint snippet to functions.php using wp_head so it renders in the head:

function clickmint_head_script() {
  ?>
  <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_TOKEN' + currentPath;
      var queryParts = [];
      var storedPreview = localStorage.getItem(previewStorageKey);
      var storedReferrer = localStorage.getItem(referrerStorageKey);

      if (storedPreview) queryParts.push('cm_preview=' + encodeURIComponent(storedPreview));
      if (storedReferrer) queryParts.push('cm_referrer=' + encodeURIComponent(storedReferrer));

      var script = document.createElement('script');
      script.async = true;
      script.src = baseUrl + (queryParts.length ? '?' + queryParts.join('&') : '');
      (document.head || document.documentElement).appendChild(script);
    })();
  </script>
  <?php
}
add_action('wp_head', 'clickmint_head_script', 2);

Option B — head injection plugin

If you use WPCode, Insert Headers and Footers, or a similar plugin, paste the ClickMint snippet into the Header section so it lands in <head>.

Do not put the script in the footer. If your GA4 base tag is currently coming from GTM only, use Approach 2 instead.

Magento / Adobe Commerce

If you manage scripts from the admin UI:

Go to Content → Design → Configuration
Edit the store view configuration you want to update
Open HTML Head
Paste the ClickMint script into Scripts and Style Sheets so it renders in the page head
Save and clear caches if required

If your theme team manages code directly, place the ClickMint script in the head template immediately after GA4.

If GA4 is currently controlled only by GTM or a vendor-managed tag system, use Approach 2 instead of forcing a mixed setup.

Next.js / React (App Router)

Use next/script with strategy="beforeInteractive" so GA4 and ClickMint both run before hydration:

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX" strategy="beforeInteractive" />
        <Script id="ga4-init" strategy="beforeInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){ dataLayer.push(arguments); }
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXXXXX');
          `}
        </Script>
        <Script id="clickmint-script" strategy="beforeInteractive">
          {`
            (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_TOKEN' + currentPath;
              var queryParts = [];
              var storedPreview = localStorage.getItem(previewStorageKey);
              var storedReferrer = localStorage.getItem(referrerStorageKey);

              if (storedPreview) queryParts.push('cm_preview=' + encodeURIComponent(storedPreview));
              if (storedReferrer) queryParts.push('cm_referrer=' + encodeURIComponent(storedReferrer));

              var script = document.createElement('script');
              script.async = true;
              script.src = baseUrl + (queryParts.length ? '?' + queryParts.join('&') : '');
              (document.head || document.documentElement).appendChild(script);
            })();
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  )
}

Next.js / React (Pages Router)

Place the GA4 and ClickMint scripts in _app.tsx or a shared document layout using beforeInteractive:

import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX" strategy="beforeInteractive" />
      <Script id="ga4-init" strategy="beforeInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){ dataLayer.push(arguments); }
          gtag('js', new Date());
          gtag('config', 'G-XXXXXXXXXX');
        `}
      </Script>
      <Script id="clickmint-script" strategy="beforeInteractive">
        {`
          (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_TOKEN' + currentPath;
            var queryParts = [];
            var storedPreview = localStorage.getItem(previewStorageKey);
            var storedReferrer = localStorage.getItem(referrerStorageKey);

            if (storedPreview) queryParts.push('cm_preview=' + encodeURIComponent(storedPreview));
            if (storedReferrer) queryParts.push('cm_referrer=' + encodeURIComponent(storedReferrer));

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

Other CMS platforms with a head field

If your platform exposes a site-wide head injection field (for example BigCommerce, Webflow, HubSpot CMS, or a custom CMS theme setting), paste the ClickMint script there immediately after your GA4 base tag.

If the field writes into the footer or a deferred script slot instead of <head>, do not use it for ClickMint — switch to Approach 2.

Generic HTML

For any site where you can edit the page template directly:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Your Site</title>

    <!-- Existing direct GA4 snippet first -->
    <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>

    <!-- ClickMint script second -->
    <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_TOKEN' + currentPath
        var queryParts = []
        var storedPreview = localStorage.getItem(previewStorageKey)
        var storedReferrer = localStorage.getItem(referrerStorageKey)

        if (storedPreview) queryParts.push('cm_preview=' + encodeURIComponent(storedPreview))
        if (storedReferrer) queryParts.push('cm_referrer=' + encodeURIComponent(storedReferrer))

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

Verifying your setup

Step 1 — Confirm the script is loading from `experiments.api.clickmint.com`

Open the browser network tab and reload a page with an active experiment. You should see a successful request to experiments.api.clickmint.com/... returning JavaScript.

Step 2 — Check `cm_tracking` in GA4 DebugView

Go to GA4 → Admin → DebugView
Visit an experiment page
Look for a cm_tracking event
Confirm it carries experiment parameters such as experiment_id, outcome_id, and event_type

Step 3 — Confirm the `experiment_id` user property is being set

Look for the ClickMint console log:

[ClickMint] User properties set for conversion tracking.

In the current ClickMint tracking model, the key GA4 user-scoped property to verify is experiment_id.

Step 4 — Check for duplicate GA4 base tags

In the browser console:

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

This should return 1.

Troubleshooting

Symptom	Likely cause	Fix
`cm_tracking` is missing from DebugView	ClickMint script is not loading	Check the network tab for a request to `experiments.api.clickmint.com` and confirm it returns JavaScript
The experiment appears late or flashes after the page loads	The script is in the footer or otherwise loading too late	Move the ClickMint script into `<head>` directly after GA4
`gtag is not defined` appears in the console	GA4 is not loading before ClickMint	Load GA4 first or use the GTM serverless guide if GTM owns GA4
Duplicate page views or inflated GA4 traffic	More than one GA4 base tag is present	Remove the duplicate GA4 install from plugins, theme settings, or inline code
Conversions stay at zero in ClickMint	GA4 custom definitions are missing or newly created	Recheck the setup hub, confirm `experiment_id` is registered as a user-scoped dimension, and allow 24–48 hours for GA4 processing