我需要我的cookie同意脚本加载为我们的NextJS应用程序中的第一个脚本。我的问题是，我们实现了Facebook像素跟踪，他们有parentNode.insertBefore所以他们的脚本总是在最上面。
这是我们如何使用facebook像素，它来自他们自己的文档
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;
这是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;
和我加载我的onetrust脚本组件之前的facebook，这里:
class Document extends NextDocument {
render() {
return (
<Html>
<NextHead>
<DocumentOneTrust />
</NextHead>
<body>
<Main />
<NextScript />
<DocumentFacebookPixel />
</body>
</Html>
);
}
}
创建了一个_app。TSX来处理这个问题。首先有一个检查，如果一个信任窗口是活跃的，或者如果选择加入的cookie设置。只要其中一个是ok的，我们的脚本(我们使用谷歌标签管理器)包括。
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*)OptanonConsents*=s*([^;]*).*$)|^.*$/, '$1').indexOf('C0004') > -1) {
setInjectScript(true);
}
}, []);
return (
<GTMProvider state={{ injectScript, ...gtmParams }}>
<Component {...pageProps} />
</GTMProvider>
);
}