Cromanion

Install Cromanion

One tag, every platform. The conversion agent that runs itself. Paste the snippet once and the agent starts learning your site — the proof lands in the tools you already use.

Before you paste
  1. Create your site in the Cromanion app — we crawl it to learn the funnel (no card, free trial).
  2. Copy your pk_ key from the site's Install screen.
  3. Paste the tag below — with your key — where your platform takes custom code.

The tag

The same snippet works everywhere. Swap pk_your_site_key for the key from your Install screen; leave the rest exactly as-is.

<script async src="https://cromanion.com/c.js" data-site="pk_your_site_key" data-endpoint="https://in.cromanion.com/i"></script>

It loads asynchronously (<20 kB) and never blocks your page. Your console's Install screen lights up the moment the first beacon arrives, so you know it's live.

Where to paste it

WordPressShopifyWixWebflowSquarespaceFramerLovableBase44Any other site

WordPress

Use the Cromanion plugin — no theme editing, survives updates.

  1. Install the Cromanion plugin from the WordPress plugin directory (or upload the ZIP under Plugins → Add New → Upload).
  2. Activate it, then open Settings → Cromanion.
  3. Paste your pk_ key (you can paste the whole <script> tag — we pull the key out) and Save.
  4. The tag is now injected on every public page. Verify it in your Cromanion console's Install screen.

Prefer the plugin — it survives theme updates. To paste manually instead, drop the tag before </body> in Appearance → Theme File Editor → footer.php.

Shopify

Paste the tag into your theme's theme.liquid, before </body>.

  1. In the Shopify admin, go to Online Store → Themes.
  2. On your live theme, click ⋯ → Edit code.
  3. Open Layout → theme.liquid.
  4. Paste the tag on its own line just before the closing </body> tag, then Save.

With our Shopify app installed, you can skip the code: Online Store → Themes → Customize → App embeds → Cromanion → on, then paste your key. The manual paste above works on every plan meanwhile.

Wix

Add it as a custom-code embed that loads on all pages.

  1. Open your Wix dashboard → Settings → Custom Code (under Advanced).
  2. Click + Add Custom Code and paste the tag.
  3. Set it to load on All pages and place it in Body - end.
  4. Apply. Republish your site if prompted.

With our Wix app from the App Market you can skip all of this: it signs you up from inside Wix and injects the tag itself — there is no key to copy. The manual embed above stays the fallback, and Wix custom code requires a Premium plan.

Webflow

Add it to Project Settings → Custom Code, before </body>.

  1. Open Project Settings → Custom Code.
  2. Paste the tag in the “Before </body> tag” field.
  3. Save changes, then Publish your site.

Site-wide custom code requires a paid Webflow Site plan.

Squarespace

Add it via Code Injection → Footer.

  1. Open Settings → Advanced → Code Injection.
  2. Paste the tag into the Footer box.
  3. Save. It now loads site-wide.

Code Injection requires a Squarespace Business plan or higher.

Framer

Add it in Site Settings → Custom Code, End of <body>.

  1. Open Site Settings → General → Custom Code.
  2. Paste the tag in the “End of <body> tag” field.
  3. Publish your site.

Lovable

Paste it into the app's root index.html, before </body>.

  1. Open your Lovable project and edit index.html (or ask the AI to add a script tag before </body>).
  2. Paste the tag just before the closing </body> tag.
  3. Publish / redeploy the app.

Lovable apps are React/Vite — the tag belongs in the root index.html, not inside a component.

Base44

Add it to your app's custom body code, before </body>.

  1. In Base44, open your app's settings and find the custom code / HTML section.
  2. Paste the tag into the body (end-of-body) field, before </body>.
  3. Publish the app.

If Base44 offers both a head and a body field, use the body option.

Any other site

Paste the tag before </body> on every page.

  1. Open the shared HTML layout your pages render from.
  2. Paste the tag on its own line just before the closing </body> tag.
  3. Deploy. One tag covers every page.

Connect your analytics

The tag writes its events into the analytics you already run. Most tools need one setting before the cromanion_holdout filter works — here is that setting, per tool.

Every event carries cromanion_holdout: true is the control group (never shown anything), false the exposed group. That one property is the whole causal split — the guides below are about making it filterable in your tool.

Google Analytics 4 through Google Tag ManagerGoogle Analytics 4 with gtag.js on the pagePlausibleMatomoFathomSegmentShopify with GA4 from the Google & YouTube channelAnything else

Google Analytics 4 through Google Tag Manager

Three GTM objects and one GA4 custom dimension — without them the events die in the data layer.

Out of the box: The tag pushes every event into window.dataLayer. GTM forwards nothing until a trigger and a tag tell it to.

  1. In GTM, open Variables → New → Data Layer Variable. Name it “DLV – cromanion_holdout” and set the Data Layer Variable Name to cromanion_holdout. Add a second one for action_type if you want to split by intervention type.
  2. Open Triggers → New → Custom Event. Tick “Use regex matching” and set the event name to ^cromanion_ — one trigger catches all four events.
  3. Open Tags → New → Google Analytics: GA4 Event. Enter your Measurement ID, set Event Name to {{Event}}, and under Event Parameters add cromanion_holdout = {{DLV – cromanion_holdout}} (and action_type if you created it). Attach the trigger from the previous step.
  4. Click Preview, load a page of your site, and check the four cromanion_ events appear in the Tag Assistant timeline with the tag firing. Then Publish the container.
  5. In GA4, open Admin → Custom definitions → Create custom dimension. Scope: Event. Dimension name: Cromanion holdout. Event parameter: cromanion_holdout. Save.
  6. From the next day, Explore → Free form: dimension “Cromanion holdout”, metrics Sessions and Conversions. true is the control group, false the exposed one.

Step 5 is the one people skip: without the custom dimension the parameter reaches GA4 but cannot be used in any report or exploration. GA4 fills a new dimension from the moment it is created, never retroactively.

Google Analytics 4 with gtag.js on the page

Nothing to wire — only register the parameter as a custom dimension.

Out of the box: The tag calls gtag('event', …) itself with the full payload. The events arrive; the property is just not visible yet.

  1. Confirm gtag is on your pages: view the page source and look for gtag('config', 'G-…'). If GA4 is loaded through Google Tag Manager instead, follow the GTM guide — the data layer alone is not forwarded.
  2. In GA4, open Admin → Custom definitions → Create custom dimension. Scope: Event. Dimension name: Cromanion holdout. Event parameter: cromanion_holdout. Save.
  3. Optionally add a second event-scoped dimension for action_type, to see which intervention types move conversions.
  4. The four cromanion_ events show in Reports → Realtime within seconds, and in Reports → Engagement → Events within 24–48 hours.
  5. Explore → Free form: dimension “Cromanion holdout”, metrics Sessions and Conversions. true is the control group, false the exposed one.

A custom dimension only fills from the moment it is created. Register it on day one, or the first weeks of proof stay invisible in GA4 even though they were sent.

Plausible

Make the four events goals, then enable the custom properties you want to filter on.

Out of the box: The tag calls plausible(name, { props }) when the Plausible script is on the page.

  1. Site settings → Goals → Add goal → Custom event. Enter cromanion_action_shown. Repeat for cromanion_action_click, cromanion_assisted_conversion and cromanion_decision.
  2. Site settings → Custom properties → Add property. Enter cromanion_holdout, then action_type.
  3. In the dashboard, click a goal in the Goal Conversions panel, then filter on the property cromanion_holdout: true is the control group, false the exposed one.
  4. If your pages define no window.plausible function (the plain script.js snippet does not), add Plausible's one-line custom-events queue snippet from their docs, or switch to the script variant that supports custom events.

Custom properties are a Plausible Business plan feature (or any self-hosted instance).

Matomo

Nothing to configure: the events land in Behaviour → Events, with the assignment in the Event Name slot.

Out of the box: The tag calls _paq.push(['trackEvent', 'Cromanion', name, assignment]) when Matomo is on the page.

  1. Open Behaviour → Events → Event Categories and pick Cromanion. The Event Actions are the four event names; the Event Names are exposed and control.
  2. To compare conversion rates, create two segments: “Event Name equals exposed” and “Event Name equals control”. Open Goals under each segment.

Matomo cannot filter on an arbitrary event property, so the control/exposed assignment travels in the Event Name slot instead of as cromanion_holdout.

Fathom

Nothing to configure: each event name carries the assignment.

Out of the box: The tag calls fathom.trackEvent(name) when Fathom is on the page.

  1. Open your site's Events panel. The events appear as “cromanion_action_shown · exposed”, “cromanion_decision · control”, and so on.
  2. Compare the exposed and control variants of cromanion_decision against your own conversion events to rebuild the split.

Fathom events take a name and nothing else, so the assignment is baked into the name rather than sent as a property.

Segment

Check the Debugger, then map the property in each destination.

Out of the box: The tag calls analytics.track(name, payload) when Segment's analytics.js is on the page.

  1. Open your website Source → Debugger and load a page of your site. The four cromanion_ track calls appear with cromanion_holdout in their properties.
  2. Every connected destination receives them. For a GA4 destination, map cromanion_holdout as an event parameter and register it as a custom dimension in GA4 (see the GA4 guides).

Shopify with GA4 from the Google & YouTube channel

Add a page-side GA4 (gtag.js or GTM) in your theme, then follow that guide.

Out of the box: Shopify runs channel pixels in a sandbox that cannot see the page's data layer or gtag. The tag's events never reach that GA4.

  1. Online Store → Themes → ⋯ → Edit code → Layout → theme.liquid. Paste the gtag.js snippet from GA4 (Admin → Data streams → your stream → View tag instructions) inside <head>, with the same Measurement ID the channel uses.
  2. Follow the “Google Analytics 4 with gtag.js on the page” guide above to register the custom dimension.
  3. Prefer Tag Manager? Paste the GTM container in theme.liquid instead and follow the GTM guide.

The channel's sandboxed pixel keeps reporting purchases exactly as before; the page-side tag is what receives Cromanion's events. GA4 deduplicates page views by client id when both share the Measurement ID.

Anything else

Forward the events yourself with one listener.

Out of the box: The tag exposes window.cromanion.on(event, callback) for tools it does not detect.

  1. Add, after the Cromanion tag: window.cromanion.on('cromanion_action_shown', function (p) { yourTool.track('cromanion_action_shown', p); }) — and the same line for cromanion_action_click, cromanion_assisted_conversion and cromanion_decision.
  2. The payload is exactly what the tag pushes to the data layer: always cromanion_holdout (true = control, false = exposed), plus action_type and decision_id where they apply.

Stuck, or on a platform not listed? If you can paste a <script> tag anywhere before </body>, Cromanion works. Get started →

Still stuck? Ask us — tell us the platform and what you tried.