Gatsby js/React jsのFacebookピクセル

私は最近gatsbyjsを使用してサイトを開発しました。サイト上で（Googleアナリティクスと同様に）Facebookのコンバージョンピクセルを使用したいと考えています。コンバージョンタイプの広告を掲載できるようにするには、アイデアが必要です。もしあなたが5歳のように私に話したら、それは大いに役立つだろう。Gatsby js/React jsのFacebookピクセル

<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

、これは他の人が中にサードパーティのトラッキングコードを実装している方法です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のピクセルのために利用可能ギャツビープラグインがあります - https://github.com/gscopet/gatsby-plugin-facebook-pixel

それはギャツビーサーバーレンダリングAPIのonRenderBody方法を使用することによって、公式のFacebookピクセルJSを挿入して送信するの世話をしますイベントをGatsby Browser APIのonRouteUpdateメソッドを使用して実行します。

ここにあります公式ギャツビーGoogleアナリティクスプラグインの後にモデル化されているように見えます - これに関する情報の多くはそこにありませんhttps://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics

出典

2017-11-22 12:15:55 jarace87

Gatsby js/React jsのFacebookピクセル

答えて

関連する問題