Menu
I've recently developed site using gatsbyjs and I want to use a facebook conversion pixel on the site(as well as Google analytics). I need ideas or help to make them work so I can run a conversion type ad. It would help tremendously if you spoke to me like a 5 year old.
The code that renders <head> is :
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>
)
},
})and my facebook pixel looks like this:
<!-- 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 -->
678
React doesn't let you embed runnable code directly within script tags. Instead you need to use the odd sounding API dangerouslySetInnerHTML. Your code should look something like:
<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>
Add this code to the bottom of your html.js page and it should execute just fine.
109
There is a Gatsby plugin available for Facebook Pixel here - https://github.com/gscopet/gatsby-plugin-facebook-pixel
It will take care of inserting the official Facebook Pixel JS by using the onRenderBody method of the Gatsby Server Rendering API and sending ViewContent events by using the onRouteUpdate method of the Gatsby Browser API.
It appears to have been modelled after the official Gatsby Google Analytics plugin which is available here - https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
