WordPress

On WordPress you add Grona’s three-line snippet to the <head> of every page, either with a header and footer plugin or by editing your theme. Use this page to install Grona on a WordPress site and to stop caching and optimisation plugins from delaying or rewriting the scripts. For WooCommerce stores, also read WooCommerce; for Elementor sites, read Elementor.

Before you start

Admin access to the WordPress site.
The ability to install plugins, or to edit theme files.
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>

Keep all three lines together and in this order. The anti-flicker script has no async or defer on purpose: it must run before the page renders.

Install

Use the plugin method unless you have a reason not to. It survives theme updates; a theme file edit does not.

WPCode plugin (recommended)
Theme file

Install WPCode. In your WordPress admin, go to Plugins > Add New Plugin, search for “WPCode” (formerly “Insert Headers and Footers”), select Install, then Activate.
Paste the snippet. Go to Code Snippets > Header & Footer. Paste the Grona snippet into the Header section.
Save. Select Save Changes.

Open the theme file editor. Go to Appearance > Theme File Editor and select header.php from the file list.
Paste the snippet at the top of <head>. Find the opening <head> tag and paste the Grona snippet directly after it, above every other script.
Save. Select Update File.

Theme updates overwrite this file, so you have to paste the snippet again after every theme update or theme switch. Block themes have no header.php, and some hosts turn the Theme File Editor off; use the plugin method in those cases.

Both methods add Grona to every page of the site. WPCode can also limit a snippet to individual pages or post types, but you normally load Grona everywhere and choose pages with each campaign’s URL rules.

Platform notes

Caching and optimisation plugins. Plugins and services such as WP Rocket (“Delay JS”), Autoptimize, LiteSpeed Cache, NitroPack and Cloudflare Rocket Loader can break Grona in three ways:

they delay or defer the anti-flicker script, so visitors see the original page before the change (flicker);
they combine or minify Grona’s scripts into a bundle of their own;
they add a version string such as ?ver= to the script URL, which makes the dashboard installation check report the script as missing.

In each plugin you use, exclude both Grona script URLs (https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/antiflicker.js and https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/main.js) from delaying, deferring, combining and minifying. Then clear the plugin’s cache and check the page source: both tags should appear exactly as you pasted them.

Position in <head>. Grona’s tags should come before other scripts. Plugins decide where their header output lands, so check the page source after you save. See Prevent flicker.

Consent banners. If your consent plugin blocks scripts until a visitor accepts, Grona’s scripts do not run before consent: the first page has no flicker protection and the dashboard check reports the script as missing. See Consent and storage.

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

Verify

Open a page of 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, then run the dashboard check. See Verify your installation.

Track conversions

WordPress has no Grona-specific conversion path. Use a custom-event goal from the Grona dashboard, as described in Track conversions and custom events. If you run WooCommerce, see the order goal in WooCommerce.

Remove Grona

Delete the Grona snippet from Code Snippets > Header & Footer and select Save Changes, or remove it from header.php and select Update File. Remove any Grona exclusions you added to caching plugins, then clear their caches. See Remove Grona for the rest.