Necesito tener mi secuencia de comandos de consentimiento de Cookies cargada como la primera secuencia de comandos en nuestra aplicación NextJS. Mi problema es que tenemos implementado el seguimiento de píxeles de Facebook y tienen un parentNode.insertBefore , por lo que su secuencia de comandos siempre está en la parte superior.
Así es como estamos usando el píxel de Facebook, y es de sus propios documentos
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;Y este es el código de onetrust
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;Y cargo mi componente de secuencia de comandos onetrust antes de Facebook, aquí:
class Document extends NextDocument { render() { return ( <Html> <NextHead> <DocumentOneTrust /> </NextHead> <body> <Main /> <NextScript /> <DocumentFacebookPixel /> </body> </Html> ); } }