next.js如何加入google或者百度统计
2020-03-11 本文已影响0人
cbw100
在next.js框架中如何加入google或者百度统计呢？
1. 第一种
在<Head>之间加入，代码如下
<Head>
<script dangerouslySetInnerHTML={{__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');`}} />
</Head>
<noscript dangerouslySetInnerHTML={{__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden;"></iframe>`}} />
2. 第二种
首先创建一个Script组件
// modules/Script.js
export default ({children}) => (
<script dangerouslySetInnerHTML={{__html: `(${children.toString()})();` }}></script>
);
接着重写_document文件
import Document, { Head, Main, NextScript } from 'next/document'
import Script from '../modules/Script';
export default class MyDocument extends Document {
render () {
return (
<html>
<body>
<Main />
<Script>
{
() => {
console.log('foo');
}
}
</Script>
<NextScript />
</body>
</html>
)
}
}
3. 总结
发现都用到了react中的一个属性 dangerouslySetInnerHTML
相关文章:
