Question

我最近使用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 -->

Answer 1

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页面的底部，它应该执行得很好。

Answer 2

请记住，在SLA上，每次更改页面时都需要刷新Google Analytics代码。如果您只是在页面加载中运行，它将不会跟踪页面更改。

至少在我正在使用的Gatsby模板中，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
    })
  }
}

每次更改页面时都会运行

exports.onRouteUpdate。这里有一些讨论： https://github.com/gatsbyjs/gatsby/issues/64

Answer 3

Facebook Pixel有一个Gatsby插件 - https://github.com/gscopet/gatsby-plugin-facebook-pixel

它将使用Gatsby Server Rendering API的onRenderBody方法插入官方Facebook Pixel JS，并使用Gatsby浏览器的ViewContent方法发送onRouteUpdate事件API。

它似乎是在官方Gatsby Google Analytics插件之后建模的 - https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics

Answer 4

这对于某些人可能是显而易见的，但请确保关闭要跟踪的网站的adblocker。否则，如果这是一个人流量低的站点，并且您正在测试计算机上的跟踪，则不会看到任何活动。

Answer 5

First Gatsby 不让你使用像这样的脚本，所以你应该使用：

   <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>

第二：你不能没有脚本，你必须让它成为普通脚本像这样：

<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>

Gatsby中的Facebook像素js / React js

5 个答案: