盖茨比js/React js中的Facebook像素

我最近使用gatsbyjs开发了一个网站，我想在网站上使用facebook转换像素（以及谷歌分析）。我需要想法或帮助，使他们的工作，这样我就可以运行一个转换类型的广告。这将非常有帮助，如果你对我说，像一个5岁的孩子

呈现

的代码是：

module.exports=React.createClass({
propTypes（）{
返回{
正文：React.PropTypes.string，
}
},
渲染（）{
常数头=头盔。倒带（）
让css
if（process.env.NODE_env===‘生产’）{
css=
}
返回(
{head.title.toComponent（）}
{head.meta.toComponent（）}
{css}
)
},
})
React不允许将可运行代码直接嵌入
script
标记中。相反，您需要使用听起来奇怪的API
危险的HTML
。您的代码应该如下所示：

<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页面的底部，它应该可以正常执行。
请记住，在SPA上，每次更改页面时都需要刷新分析代码。如果您只是在pageload上运行，它将不会跟踪页面更改

至少在我使用的盖茨比模板中，
Gatsby browser.js

import ReactGA from 'react-ga'
import { config, pages } from 'config'
import find from 'lodash/find'

if (config.gaCode) {
  ReactGA.initialize(config.gaCode)
}

exports.onRouteUpdate = state => {
  if (config.gaCode) {
    const page = find(pages, {path: state.pathname})
    ReactGA.ga('send', 'pageview', {
      location: location.pathname,
      title: page && page.data && page.data.title ? page.data.title : state.pathname,
      page: state.pathname
    })
  }
}

导出。每次更改页面时都会运行onRouteUpdate
。这里有一些讨论：
这里有一个适用于Facebook Pixel的盖茨比插件-

它将使用盖茨比服务器渲染API的
onRenderBody
方法插入官方Facebook Pixel JS，并使用盖茨比浏览器API的
onRouteUpdate
方法发送
ViewContent
事件

它似乎是按照官方的盖茨比谷歌分析插件（此处提供）建模的-
这对一些人来说可能很明显，但请确保关闭你正在跟踪的网站的adblocker。否则，如果是低流量站点，并且您正在计算机上测试跟踪，您将看不到任何活动。
首先，盖茨比不允许您使用这样的脚本，因此您应该使用：

   <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');
  `}}
/></script>



第二：你不能使用noscript，你必须使其成为普通脚本，如下所示：

<script type="text/javascript" dangerouslySetInnerHTML={{
      __html: `
    <img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=678059259599817&ev=PageView&noscript=1"
    />`}}></script>


关于这方面的信息并不多，其他人是这样在React SPA中实现第三方跟踪代码的吗？是的，这是我所看到的。我知道这很古老，为什么要将其作为HTML嵌入？只需将函数放在文件中，并将其导入页面加载，我们在Gatsby中的具体操作位置是什么？添加一条快速注释-刚刚实现了此方法，并且可以正常工作，但是在本地开发模式下，FB Tracking pixel脚本没有被附加。在运行构建过程之后，它确实在那里。