Пиксель Facebook в Gatsby js/React js

Недавно я разработал сайт с использованием gatsbyjs и хочу использовать на сайте пиксель конверсии facebook (а также аналитику Google). Мне нужны идеи или помощь, чтобы заставить их работать, чтобы я мог запустить рекламу конверсионного типа. Было бы очень полезно, если бы вы говорили со мной, как с пятилетним ребенком.

Код, который отображает <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 -->


reactjs facebook gatsby google-analytics
person Aiman Farhan    schedule 18.10.2016    source источник

Ответы (5)


arrow_upward
6
arrow_downward

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, и он должен работать нормально.

person Kyle Mathews    schedule 19.10.2016
comment
Там не так много информации об этом, это то, как другие люди внедряют сторонний код отслеживания в React SPA? - person Christian Davis; 30.10.2016
comment
Да, это то, что я видел. - person Kyle Mathews; 31.10.2016
comment
Я знаю, что это старо, ПОЧЕМУ это вообще встраивается как HTML? просто поместите функцию в файл и импортируйте ее при загрузке страницы - person Sampson Crowley; 29.11.2018
comment
Где именно мы будем это делать в Гэтсби? - person heytulsiprasad; 10.12.2020

arrow_upward
6
arrow_downward

Здесь доступен плагин Gatsby для Facebook Pixel — https://github.com/gscopet/gatsby-plugin-facebook-pixel

Он позаботится о том, чтобы вставить официальный Facebook Pixel JS, используя метод onRenderBody API рендеринга сервера Gatsby, и отправив ViewContent события, используя метод onRouteUpdate API браузера Gatsby.

Похоже, он был создан по образцу официального плагина Gatsby Google Analytics, который доступен здесь: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics

person Joe Race    schedule 22.11.2017

arrow_upward
3
arrow_downward

Помните, что в SPA код Analytics необходимо обновлять каждый раз, когда вы меняете страницу. Если вы просто запустите загрузку страницы, она не будет отслеживать изменения страницы.

По крайней мере, в шаблоне Гэтсби, который я использую, есть необходимый код в 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

person lofihelsinki    schedule 21.03.2017
comment
добавление быстрого комментария - только что реализовал этот метод, и он работает, однако скрипт пикселя отслеживания FB не добавлялся в локальном режиме разработки. после запуска процесса сборки он действительно был там. - person Stephen Tetreault; 09.06.2018

arrow_upward
0
arrow_downward

Для некоторых это может быть очевидно, но убедитесь, что вы отключили блокировщик рекламы для сайта, который вы отслеживаете. В противном случае, если это сайт с низким трафиком и вы тестируете отслеживание на своем компьютере, вы не увидите никакой активности.

person Billy Mitchell    schedule 16.10.2020

arrow_upward
0
arrow_downward

Первый Гэтсби не позволяет вам использовать такой сценарий, поэтому вы должны использовать:

   <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>
person Hassan Mohamed    schedule 07.04.2021