我最近使用 gatsbyjs 开发了网站，我想在网站上使用 facebook 转换像素(以及 Google 分析)。我需要想法或帮助来使其发挥作用，以便我可以转换转化类型的广告。如果你像一个 5 岁的 child 一样对我说话，那将会有很大帮助。
呈现 <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 -->最佳答案
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 页面的底部，它应该可以正常执行。
关于Gatsby js/React js 中的 Facebook 像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40109828/