Skip to content

Debug in the browser

When a variation does not show, or you want to confirm what Grona did on a page view, your browser’s developer tools tell you most of what you need. This page shows where to look: the network panel, the address bar, the page markup, storage and the console.

Open the page in a normal browser window, with ad and content blockers off, and open the developer tools before you load it.

Filter the network panel by grona. On a page with the Grona snippet you should see these requests.

Request When What it tells you
cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/antiflicker.js every page view The anti-flicker script loaded.
cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/main.js every page view The runtime loaded. It is revalidated on every load, so a 304 status is normal.
a .json file under cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/campaigns/ when a campaign enrols the visitor The runtime downloaded a variation’s changes.
api.grona.ai/track/events after enrolment (or on every page while measuring every page is switched on), and after each conversion Page views, clicks, scroll, time on page and conversions, sent in batches. Some are sent with sendBeacon when you leave the page.
api.grona.ai/track/antiflicker when main.js starts (loaded), and when the safety timer has to reveal the page (timeout) Timing reports. See Prevent flicker.
api.grona.ai/preview/... preview links only The runtime fetched the variation you are previewing.

What to look for:

  • No main.js request. The snippet is not on the page, a tag manager or consent tool has not injected it yet, or a blocker removed it.
  • main.js loads but no .json file follows. No campaign enrolled the visitor on this page. Check URL rules, audience rules, priority and the schedule. If the campaign uses a variation with no changes, such as a control, there may be no file to fetch.
  • The .json request fails or is blocked. Check the console for a Content Security Policy error. https://cdn.grona.ai must be in connect-src, not only in script-src. See Content Security Policy.
  • No track/events request after a conversion. See When conversions are not counted.

When the runtime applies a variation other than the control, it adds a marker to the address bar without reloading the page:

https://shop.example.com/?v=grona-671a3c90

The value after grona- is the first eight characters of the variation id. If you see the marker, a variation was applied on this page view. Visitors in the control group get no marker. The runtime sets the marker with history.replaceState, so it overwrites any v parameter your site already uses.

Inspect the page in the elements panel.

  • data-grona-id attributes. The runtime stamps these on elements when it applies changes and when it tags elements for click tracking. Their presence shows the runtime ran, but not that a variation was applied, because the control is tagged for click tracking too.
  • Other markers. You may also see data-grona-inserted, data-grona-for and data-gro-original_* attributes on elements that Grona added or changed.
  • The anti-flicker element. While the page is hidden, the <head> contains <style data-grona-antiflicker>, which sets the body to hidden. The runtime removes it once the changes are applied, or straight away if no campaign matched. If it is still there after the page has loaded, the runtime did not finish, and a safety timer reveals the page 5 seconds after the anti-flicker script ran.

In the application or storage panel, look at the page’s own origin.

  • Local storage holds grona_client_data, which contains the random visitor id that decides the visitor’s variation. As long as it stays the same, the visitor sees the same variation, unless the campaign’s traffic split changes.
  • Session storage holds grona_session_id and related keys for the current visit.

Grona sets no cookies. The full list of keys and their lifetimes is in Consent and storage. If storage is blocked, the runtime keeps the id in memory for that page only, so the visitor can get a new id, and possibly a different variation, on every page load.

The production script writes messages to the console, for example when it starts, which mode it is in, and when no campaign matched the page. These messages can help you follow what happened, and they include the visitor id.

There is no debug flag or verbose mode for production pages. To check a variation before launch, use a preview link.

  1. Load the page with the developer tools open and the network panel filtered by grona.

  2. Confirm antiflicker.js and main.js loaded without errors.

  3. Look for a .json request under cdn.grona.ai. If there is one, a campaign enrolled the visitor.

  4. Look at the address bar for ?v=grona-. If it is there, a variation other than the control was applied.

  5. Check the console for Content Security Policy errors.

  6. Trigger a conversion and confirm a track/events request goes to api.grona.ai.

If a step fails, find the symptom in Troubleshooting.