4

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

4

5 回答 5

6

这里有一个可用于 Facebook Pixel 的 Gatsby 插件 - https://github.com/gscopet/gatsby-plugin-facebook-pixel

它将使用onRenderBodyGatsby Server Rendering API 的方法插入官方 Facebook Pixel JS，并使用Gatsby Browser APIViewContent的方法发送事件。onRouteUpdate

它似乎是根据官方 Gatsby Google Analytics 插件建模的，该插件可在此处获得 - https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics

于 2017-11-22T12:15:55.683 回答
6

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 页面的底部，它应该可以正常执行。

于 2016-10-19T16:39:13.413 回答
3

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

至少在我使用的 Gatsby-template 中有所需的代码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

于 2017-03-21T11:27:56.183 回答
0

首先盖茨比不允许你像这样使用脚本，所以你应该使用：

   <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>
于 2021-04-07T17:16:46.023 回答
0

这对某些人来说可能很明显，但请确保关闭您正在跟踪的网站的广告拦截器。否则，如果它是一个低流量站点并且您正在您的机器上测试跟踪，您将看不到任何活动。

于 2020-10-16T19:05:00.217 回答