Custom sites and frameworks

On a site you build yourself, you add Grona’s three-line snippet to the top of the <head> in your HTML or in the shared template that renders it. Use this page for static HTML sites, server-rendered templates and JavaScript frameworks such as Next.js, React and Vue.

Before you start

Access to your site’s HTML files or template system.
The ability to edit and deploy the site.
Your Grona workspace id, from your Grona dashboard. See Install the Grona script.

Install

Find the template that renders <head>. On a static site this is usually index.html and every other HTML file. On a templated site it is the shared layout or base template, for example the root layout in Next.js, the base layout in Astro, or the base template in the layouts folder in Hugo or Jekyll. If each page has its own <head>, add the snippet to each one.

Paste the snippet at the top of <head>. Put it directly after the opening <head> tag, above every other script. Replace YOUR_WORKSPACE_ID in both script URLs with your workspace id:

<!doctype html>
<html lang="en">
  <head>
    <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>
    <title>Acme Market</title>
    <!-- your other tags and scripts -->
  </head>
  <body>
    ...
  </body>
</html>

Keep all three lines, in this order. Do not add async or defer to the anti-flicker script.

Deploy. Save the file and deploy with your normal process. The snippet takes effect once the updated pages are live.

Platform notes

Frameworks such as Next.js, React and Vue. The rule is the same in every framework: both script tags must be in the <head> of the HTML your server sends, with the anti-flicker script synchronous and before other scripts. Do not add Grona from client-side code after the page loads, and do not load the anti-flicker script through a script loader that adds async or defer or inserts it after the page renders. A script that is inserted late cannot block the first paint, so visitors see flicker.

Single-page apps. Load the snippet once, in the server-rendered <head> of the HTML shell. Grona detects route changes made with the History API and re-runs campaign matching for the new URL. Hash-based routes are not supported. See Single-page applications and Server rendering and hydration.

Optimisation and bundling. Load Grona’s scripts from cdn.grona.ai as they are: do not bundle, minify or self-host them, because Grona rebuilds main.js when you change a campaign. Do not add a version string to their URLs either, because the dashboard check then reports the script as missing. Services that rewrite script loading, such as Cloudflare Rocket Loader, can delay the anti-flicker script; exclude both cdn.grona.ai scripts from them.

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

Consent banners. If your consent tool 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.

Verify

Open your live 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, and check a few different pages. Then run the dashboard check. See Verify your installation.

Track conversions

Call grona('track', eventName, data) from your own code, or create a custom-event goal in the Grona dashboard. See Track conversions and custom events and the JavaScript API.

Remove Grona

Delete the three Grona lines from your templates and deploy. See Remove Grona for the rest.