javascript - How can i make sure my onetrust consent script is loaded before facebook pixel tracking NextJS

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',",
  "'.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=";
        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 ponent before the facebook, here:

class Document extends NextDocument {
  render() {
    return (
      <Html>
        <NextHead>
         <DocumentOneTrust />
        </NextHead>
        <body>
          <Main />
          <NextScript />
          <DocumentFacebookPixel />
        </body>
      </Html>
    );
  }
}

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/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."
        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 ponent before the facebook, here:

class Document extends NextDocument {
  render() {
    return (
      <Html>
        <NextHead>
         <DocumentOneTrust />
        </NextHead>
        <body>
          <Main />
          <NextScript />
          <DocumentFacebookPixel />
        </body>
      </Html>
    );
  }
}

Share Improve this question asked Jun 23, 2022 at 9:32 mackeemackee 1714 silver badges16 bronze badges

Does this help: aaronsmith.online/… ? – anonDelta Commented Jun 23, 2022 at 9:48
1 You could use next/script with beforeInteractive strategy to load the consent script. And while you're at it, you could also use next/script with afterInteractive for the Pixel script. – juliomalves Commented Jun 25, 2022 at 17:54

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

We created an _app.tsx to handle this. First there is a check if the onetrust window is active or if the cookie for the opt-in is set. Just if one of them is ok our script (we use Google Tag Manager) is included.

function App({ Component, pageProps }: AppProps) {
 const [injectScript, setInjectScript] = useState(false);
 useEffect(() => {
  if (typeof window !== 'undefined' && !window.OptanonWrapper) {
   window.OptanonWrapper = () => {
    window.OneTrust.OnConsentChanged(() => {
      if (window.OptanonActiveGroups.indexOf('C0004') > -1) {
        setInjectScript(true);
      }
    });
   };
  }

  if (typeof window !== 'undefined' &&
   document.cookie.replace(/(?:(?:^|.*;\s*)OptanonConsent\s*=\s*([^;]*).*$)|^.*$/, '$1').indexOf('C0004') > -1) {
    setInjectScript(true);
   }
  }, []);

 return (
   <GTMProvider state={{ injectScript, ...gtmParams }}>
    <Component {...pageProps} />
   </GTMProvider>
 );
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can i make sure my onetrust consent script is loaded before facebook pixel tracking NextJS - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)