[英]dangerouslySetInnerHTML in react application not working for including Segment.io tags
我正在尝试在我的 react/NextJS 应用程序中包含 Segment.io。 我遵循由设置 Google Analytics 的先前函数设置的约定
const segmentWriteKey = 'xyz';
export default class CustomDocument extends Document {
setGoogleTags = () => {
return {
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gaTrackingId}');
console.log('here2');
`,
};
};
setSegment = () => {
return {
__html: `
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
analytics.load(${segmentWriteKey});
analytics.page();
console.log('here1');
`,
};
};
<script
dangerouslySetInnerHTML={this.setGoogleTags() /* eslint-disable-line react/no-danger */}
/>
<script
dangerouslySetInnerHTML={this.setSegment() /* eslint-disable-line react/no-danger */ }
/>
我可以看到“here2”被调用,但永远不会“here1”。 有什么想法吗?
看起来您的功能没有正确关闭。 需要在__html
字符串中的函数末尾添加两个__html
:
...
analytics.page();
console.log('here1');
};
};
`,
我也不清楚${segmentWriteKey}
值的来源。 您可能不想要${}
语法,除非您打算使用模板文字 ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals )。 此外,调用analytics.load()
似乎需要两个参数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.