From 508090377eb14f27db5ccb87c5fbe70ab79dc62d Mon Sep 17 00:00:00 2001
From: Pablo Estevez <pestevez@fb.com>
Date: Wed, 14 Mar 2018 21:01:23 -0400
Subject: [PATCH] Add Facebook Pixel ID setting (#507)

---
 docs/api-site-config.md |  3 +++
 lib/core/Site.js        | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index e3eb4fd017..8872f42589 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -90,6 +90,8 @@ customDocsPath: "website-docs"
 
 `facebookAppId` - If you want Facebook Like/Share buttons at the bottom of your blog posts, provide a [Facebook application id](https://www.facebook.com/help/audiencenetwork/804209223039296), and the buttons will show up on all blog posts.
 
+`facebookPixelId` - Facebook Pixel ID to track page views.
+
 `fonts` - Font-family css configuration for the site. If a font family is specified in `siteConfig.js` as `$myFont`, then adding a `myFont` key to an array in `fonts` will allow you to configure the font. Items appearing earlier in the array will take priority of later elements, so ordering of the fonts matter.
 
 In the below example, we have two sets of font configurations, `myFont` and `myOtherFont`. `Times New Roman` is the preferred font in `myFont`. `-apple-system` is the preferred in `myOtherFont`.
@@ -217,6 +219,7 @@ const siteConfig = {
   scripts: [ "https://docusaurus.io/slash.js" ],
   stylesheets: [ "https://docusaurus.io/style.css" ],
   facebookAppId: "1615782811974223",
+  facebookPixelId: "352490515235776",
   twitter: "true"
 };
 
diff --git a/lib/core/Site.js b/lib/core/Site.js
index c4feec0a98..c6f1060500 100644
--- a/lib/core/Site.js
+++ b/lib/core/Site.js
@@ -112,6 +112,24 @@ class Site extends React.Component {
               }}
             />
           )}
+          {this.props.config.facebookPixelId && (
+            <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', '${this.props.config.facebookPixelId}');
+              fbq('track', 'PageView');
+                `,
+              }}
+            />
+          )}
           {this.props.config.twitter && (
             <script
               dangerouslySetInnerHTML={{