mac*_*kee 1 javascript cookies next.js
我需要将 Cookies 同意脚本作为 NextJS 应用程序中的第一个脚本加载。我的问题是，我们实施了 Facebook 像素跟踪，而他们也有一个，
parentNode.insertBefore
因此他们的脚本始终位于最上面。
这就是我们使用 facebook Pixel 的方式，它来自他们自己的文档
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;
我在 facebook 之前加载我的 onetrust 脚本组件，在这里：
class Document extends NextDocument {
render() {
return (
<Html>
<NextHead>
<DocumentOneTrust />
</NextHead>
<body>
<Main />
<NextScript />
<DocumentFacebookPixel />
</body>
</Html>
);
}
}
小智 5
我们创建了一个 _app.tsx 来处理这个问题。首先，检查 onetrust 窗口是否处于活动状态或者是否设置了选择加入的 cookie。只要其中之一没问题，我们的脚本（我们使用 Google 跟踪代码管理器）就会包含在内。
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>
);
}