Quickstart: website

This quickstart takes you from no Grona on your site to a live variation you can see in your own browser. You install the three-line snippet, check that it loads, build and preview a variation in the Grona dashboard, set it live and confirm it reached visitors. You need access to your site’s HTML template and a Grona workspace.

Install the snippet

1. Copy the snippet from the Grona dashboard. It already contains your workspace id. It looks like this:

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

   The first line opens the connection to Grona’s CDN early. The second hides the page until the variation is applied, so visitors normally do not see the original content change in front of them. The third is the runtime script that decides and applies variations.

2. Paste it at the top of <head>, above every other script, on every page. Put it in your base template or layout so every page carries it. Keep the three lines in this order, and do not add async or defer to antiflicker.js.

   Set data-grona-af-bg to your page’s background colour. It is the colour visitors see while the page is hidden.

3. Deploy the change. If you use a cache, optimisation or “delay JavaScript” plugin, exclude both cdn.grona.ai scripts from it, so it cannot defer, bundle or rename them.

Caution

Install the snippet in the page source, not through Google Tag Manager or another asynchronous loader. A tag manager injects the scripts after the page has started to render, so the anti-flicker script cannot hide the first paint and visitors may see the original content before the variation. See Google Tag Manager if you have no other option.

For platform-specific steps, see the platform guides or Install the Grona script.

Verify the installation

1. Open your site in a browser and open the developer tools on the Network tab.

2. Reload the page and filter by grona. You should see antiflicker.js and main.js from cdn.grona.ai, each with status 200 or 304.

3. In the Grona dashboard, run the installation check for the page. It loads the page in a headless browser and looks for your workspace’s main.js. If it reports that the script was not found, check that no plugin added a query string such as ?ver= to the script URL and that no consent tool holds the script back.

The check looks at one URL only and does not test the anti-flicker script, the order of the tags or whether the script ran. See Verify your installation for the full list of checks.

Create and preview a variation

1. Create a campaign in the dashboard for a page on your site, for example https://shop.example.com/. For this first test, use a campaign with a single variation and no control split, so every visitor who matches sees the variation and you will not land in control.

2. Build the variation in the visual editor. For example, add a free-delivery progress banner above the product grid. The editor opens your real page, so the page must be reachable from the public internet without a login. See Visual editor requirements.

3. Open the preview link. It is your page URL with ?gronaPreview= and the variation id. Preview applies the variation on your live page while the campaign is still paused. It ignores targeting and consent and records nothing, so you can reload it as often as you need.

Preview links do not expire, and anyone with the link can open it. Do not treat one as private. See Preview and QA a variation.

Set it live and confirm

1. Set the campaign live in the dashboard. Grona rebuilds your workspace’s script and refreshes the CDN. This is not instant, so allow a few minutes.

2. Open the page in a private browser window, without the preview parameter.

3. Look for the variation marker in the address bar. When a variation other than control is applied, the script adds v=grona- and the first eight characters of the variation id to the URL:

   https://shop.example.com/?v=grona-3f9a12bc

If the variation does not appear and there is no marker:

• The new script has not reached you yet. Wait a few minutes and reload.
• The page does not match the campaign’s URL rules. Paths are case-sensitive, and http:// does not match https://. See Target pages with URL rules.
• Your workspace waits for consent. Give analytics consent in your consent banner, then load another page. Consent given on a page counts from the next page view. See Consent and storage.
• You are in the control group of an A/B test. Control shows the original page and adds no marker. Use the preview link to see the variation.

See Troubleshooting for other symptoms.

Next steps

• Implementation checklist before you run campaigns on real traffic.
• Content Security Policy if your site sends a CSP header.
• Track conversions and custom events to measure orders and sign-ups.
• Single-page applications if your site changes routes without a full page load.