Aim*_*han 2 facebook google-analytics reactjs gatsby
我最近使用gatsbyjs开发了网站,我想在网站上使用facebook转换像素(以及Google分析).我需要想法或帮助让它们发挥作用,以便我可以投放转换类型的广告.如果你像一个5岁的孩子那样对我说话,那将会非常有帮助.
呈现的代码<head>是:
module.exports = React.createClass({
propTypes () {
return {
body: React.PropTypes.string,
}
},
render () {
const head = Helmet.rewind()
let css
if (process.env.NODE_ENV === 'production') {
css = <style dangerouslySetInnerHTML={{ __html: require('!raw!./public/styles.css') }} />
}
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
{head.title.toComponent()}
{head.meta.toComponent()}
<TypographyStyle typography={typography} />
<GoogleFont typography={typography} />
{css}
</head>
<body>
<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
<script src={prefixLink(`/bundle.js?t=${BUILD_TIME}`)} />
</body>
</html>
)
},
})我的facebook像素看起来像这样:
<!-- Facebook Pixel Code -->
<script>
!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', 'pixelID');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=pixelID&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->这里有一个适用于 Facebook Pixel 的 Gatsby 插件 - https://github.com/gscopet/gatsby-plugin-facebook-pixel
它将使用onRenderBodyGatsby Server Rendering API的方法插入官方 Facebook Pixel JS，并ViewContent使用onRouteUpdateGatsby Browser API的方法发送事件。
它似乎是在官方 Gatsby Google Analytics 插件之后建模的，该插件可在此处获得 - https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics
React不允许您直接在script标记中嵌入可运行代码.相反,你需要使用奇怪的声音API dangerouslySetInnerHTML.您的代码应该类似于:
<script
dangerouslySetInnerHTML={{ __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', 'pixelID');
fbq('track', 'PageView');
`}}
/>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=pixelID&ev=PageView&noscript=1"
/></noscript>
将此代码添加到html.js页面的底部,它应该执行得很好.
| 归档时间： |
|
| 查看次数： |
5800 次 |
| 最近记录： |