Manually loading Zaraz using Next.js Script

Developers Zaraz
1

I’m using Next.js and was trying to load Zaraz manually using a <Script> component:

<Script
    id={'zaraz'}
    src={'/cdn-cgi/zaraz/i.js'}
    referrerPolicy={'origin'}
    strategy={'beforeInteractive'}
/>

This gave me issues with double pageviews:

  • With SPA support enabled this gave 2 pageviews on the initial hit (the second one a bit delayed), further navigations triggered 1 additional pageview.

  • With SPA support disabled it gave 1 pageview on the initial hit, but further navigations triggered no additional pageview.

There was no issue when I moved back to using “Auto-inject script” and SPA support enabled, so it seemed related to the script tag.

Using a regular script tag instead of a Next.js <Script> works, but you’d have to disable some of their built in linting which warns about using synchronous scripts which can impact performance (see: No Sync Scripts | Next.js):

// eslint-disable-next-line @next/next/no-sync-scripts
<script src="/cdn-cgi/zaraz/i.js" referrerPolicy="origin"></script>

async works as well, not sure if it might cause other issues:

<script src="/cdn-cgi/zaraz/i.js" referrerPolicy="origin" async></script>

defer doesn’t work. Any reason it’s like this? Maybe it’s possible to make it work in all cases.