Google Tag Manager

You can load Grona’s snippet through a Custom HTML tag in Google Tag Manager (GTM), but it works less well than a direct install. Use this page only when you cannot edit your site’s <head> and GTM is the one place you can add code.

GTM loads too late to prevent flicker

Grona’s anti-flicker script has to run before the page renders. GTM tags fire only after the GTM container has downloaded and run, and GTM inserts Custom HTML tags into the page dynamically, so the anti-flicker script cannot block the first paint, whatever priority you give the tag. When it runs, it hides a page that is already showing, so visitors can see the original page, then a blank page, then Grona’s change. Where you can, install the snippet directly at the top of your site’s <head> instead: see Install the Grona script or the guide for your platform.

Before you start

• A GTM account with a container installed on your site.
• Publish access to that container.
• Your Grona workspace id, from your Grona dashboard. See Install the Grona script.

This is the snippet you paste. Replace YOUR_WORKSPACE_ID in both script URLs with your workspace id:

<link rel="preconnect" href="https://cdn.grona.ai">
<script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/antiflicker.js" data-grona-af-bg="#ffffff"></script>
<script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/main.js" async></script>

Install Grona one way only. If the snippet is already in your site’s <head>, do not add it through GTM as well.

Install

1. Open your container. Sign in at tagmanager.google.com and select your container.

2. Create a Custom HTML tag. Go to Tags > New, choose Custom HTML as the tag type, and paste the Grona snippet into the HTML field.

3. Set the trigger. Under Triggering, select All Pages (the Page View trigger) so the tag fires on every page.

4. Set the firing priority. In the tag’s Advanced Settings, set Tag firing priority to a high number, for example 9999.

5. Save and publish. Select Save, then Submit and publish the container version.

Platform notes

What tag priority does. In GTM a higher firing priority fires first, but only relative to other GTM tags on the same trigger. It makes Grona fire before your other tags. It does not make Grona run before the page renders, because every GTM tag still waits for the container.

Limiting pages. The tag fires wherever your container runs and the trigger matches. You normally fire it on all pages and choose pages with each campaign’s URL rules.

Consent. If your GTM setup holds tags until a visitor gives consent, Grona’s scripts do not run before consent. When your Grona workspace is set to Wait for consent, Grona reads Google Consent Mode update commands from the data layer. See Consent and storage and Consent platforms.

Content Security Policy. If your site sends a Content-Security-Policy header, allow Grona’s domains as described in Content Security Policy.

Verify

Open your site in a new private window, open your browser’s developer tools and filter the Network tab by grona. Confirm that antiflicker.js and main.js both load with status 200 or 304. A brief flash of the original content before a variation appears is expected with GTM.

The dashboard check can report the script as missing when GTM inserts it late. If the network tab shows both scripts loading, the install works. See Verify your installation.

Track conversions

GTM has no Grona-specific conversion path. Create a custom-event goal in the Grona dashboard, as described in Track conversions and custom events.

Remove Grona

In GTM, delete or pause the Grona Custom HTML tag, then submit and publish the container. See Remove Grona for the rest.

Next steps

• Implementation checklist
• Track conversions and custom events