Facebook pixel в Gatsby js/React js

Я недавно разработал сайт с использованием gatsbyjs, и я хочу использовать пиксель преобразования facebook на сайте (а также аналитику Google). Мне нужны идеи или помощь, чтобы заставить их работать, чтобы я мог запускать объявление типа конверсии. Это очень помогло бы, если бы вы говорили со мной, как с 5-летним ребенком.Facebook pixel в Gatsby js/React js

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

источник

2016-10-18 Aiman Farhan

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-19 16:39:13

Там не много информации об этом там, это, как другие люди реализуют 3-й код отслеживания партия в Реагировать на SPA? –

Да, это то, что я видел. –

Помните, что при использовании SLA код Analytics необходимо обновлять каждый раз при изменении страницы. Если вы просто запустили 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 
    }) 
    } 
}

exports.onRouteUpdate запускается каждый раз, когда страница изменяется. Некоторое обсуждение здесь: https://github.com/gatsbyjs/gatsby/issues/64

источник

2017-03-21 11:27:56 lofihelsinki

Существует плагин Гэтсби для Facebook Pixel здесь - https://github.com/gscopet/gatsby-plugin-facebook-pixel

Он будет заботиться о вставив чиновник Facebook Pixel JS с помощью onRenderBody метода Гэтсби сервера Rendering API и отправки ViewContent, используя метод onRouteUpdate API браузера Gatsby.

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

источник

2017-11-22 12:15:55 jarace87

Facebook pixel в Gatsby js/React js

ответ

Смежные вопросы