Platform Install Guides

One snippet, pasted once, in your page <head>, after your existing analytics or GTM code. Pick your platform below. The snippet itself is in the Quick Start, Step 3 — replace YOUR_ORG_TOKEN before pasting.

Shopify

Shopify Admin → Online Store → Themes
On the active theme: … → Edit code
Open layout/theme.liquid
Paste the snippet just before </head>
Save

This is the right placement even when GA4 runs through the Google & YouTube channel or GTM — the snippet coexists with both.

🚫 Do not also add the snippet as a Shopify custom pixel (Settings → Customer events) — two installs means doubled tracking, and the pixel sandbox breaks the script.

Shopify Plus: for experiments on checkout pages, contact ClickMint support — theme placement covers all standard pages.

WordPress

Easiest: a header-injection plugin (WPCode, Insert Headers and Footers, …) → paste the snippet into the Header field. Header, not footer.

Or in the theme — add to functions.php of a child theme:

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);

Magento / Adobe Commerce

Content → Design → Configuration
Edit the store view
Open HTML Head → paste into Scripts and Style Sheets
Save and flush caches

Next.js / React

In your shared layout (App Router shown; same block works in _app.tsx for the Pages Router):

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        {/* existing analytics bootstrap stays above ClickMint */}
        <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>
  )
}

BigCommerce, Webflow, HubSpot, and other CMSes

Use the platform's site-wide header scripts setting and paste the snippet there. It must land in <head> — if the field writes to the footer, use a different mechanism or the GTM fallback below.

Generic HTML

Paste the snippet in <head>, after your analytics tags, in your base template.

No `<head>` access at all?

GTM can load the snippet for you via a Custom HTML tag — slower to apply, but it works. Your developer will find it in the GTM Installation Guide under script-install fallback.

After installing: run the 2-minute check — Quick Start, Step 4. You want exactly one cm_tracking event per page load.