Facebook пиксель в Гэтсби JS / React JS

Я недавно разработал сайт с использованием 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 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 -->

Источник

5 ответов

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 для пикселя Facebook доступен здесь - https://github.com/gscopet/gatsby-plugin-facebook-pixel

Он позаботится о вставке официального пикселя Facebook JS с помощью onRenderBody метод API рендеринга и отправки Gatsby Server ViewContent события с помощью onRouteUpdate метод API браузера Гэтсби.

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

Источник

Помните, что в соглашениях об уровне обслуживания код 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

Источник

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

         <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>
Источник

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

Источник
Другие вопросы по тегам