I need to have my Cookies consent script loaded as the first scrip in our NextJS application.
My issue is that we have Facebook pixel tracking implemented and they have a
parentNode.insertBefore
so their script is always on top.
This is how we are using facebook pixel, and its from their own docs
const html = [
"!function(f,b,e,v,n,t,s)",
"{if(f.fbq)return;n=f.fbq=function(){n.callMethod?",
"n.callMethod.apply(n,arguments):n.queue.push(arguments)};",
"if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';",
"n.queue=[];t=b.createElement(e);t.async=!0;",
"t.src=v;s=b.getElementsByTagName(e)[0];",
"s.parentNode.insertBefore(t,s)}(window,document,'script',",
"'https://connect.facebook.net/en_US/fbevents.js');",
`fbq('init', '111222333');`,
"fbq('track', 'PageView');",
`fbq('init', '1234');`,
"fbq('track', 'PageView');",
].join("");
const DocumentFacebookPixel = () => (
<>
<script key="track-fb-pixel" dangerouslySetInnerHTML={{ __html: html }} />
</>
);
export default DocumentFacebookPixel;
And this is the onetrust code
const DocumentOneTrust = () => {
return (
<>
<script
src="https://url.com"
type="text/javascript"
charSet="UTF-8"
data-domain-script="id-123-4"
></script>
<script type="text/javascript">{function OptanonWrapper() {}}</script>
</>
);
};
export default DocumentOneTrust;
And i load my onetrust script component before the facebook, here:
class Document extends NextDocument {
render() {
return (
<Html>
<NextHead>
<DocumentOneTrust />
</NextHead>
<body>
<Main />
<NextScript />
<DocumentFacebookPixel />
</body>
</Html>
);
}
}