Home All Blogs How to Install Google Analytics and the Facebook Pixel

How to Install Google Analytics and the Facebook Pixel

How to Install Google Analytics and the Facebook Pixel

I realized the other day, while writing the blog on how to review your stats and evaluate your efforts, that the blog about Collecting your Visitors Information had one very important idea missing from its context. That missing idea was information about how to install the Google Analytics tracking code and the Facebook Pixel code. Both of these are items that should be taken care of when your website is built, but in the event that that hasn't happened, I figured I should include a bit of information on how to take care of this. Why? Because it's super important when taking a look at your efforts to evaluate their effectiveness.

First, let's chat about Google Analytics. There are a number of codes you can end up using when trying to install your Google Analytics. Which code you're using will depend on the service you started using first with Google. You can see the difference in the way that the code starts, GA_ vs AW-. Depending on which service this was, your conversion ID will be different and can cause issues if you're looking at the analytics for a different code than the one you have installed. So you'll want to double-check this code if you aren't seeing events being tracked over in your Analytics. A copy of the example code is below:

<script async
src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID">
</script>

<script>
window.dataLayer = window.dataLayer || [ ] ;
function gtag(){dataLayer.push(arguments);}
gtag( 'js', new Date () ) ;
gtag( 'config', 'GA_TRACKING_ID');
gtag( 'config', 'AW-CONVERSION_ID');
</script>

As you can see, there are two different IDs at the bottom. Both can be present but, often, it is advised to use the Google Tag manager to incorporate all of them and affect your page speed less. With the Google Tag manager you can track analytics, adwords and even Facebook pixel events with only one tracking code on the page. That's an advanced setup that we won't be covering here.

The above code is placed within the HTML of your website's Head tag. This tag looks like and its closing tag is . Most often, you'll place these two script blocks () just before the closing tag. Which is the same place the Facebook Pixel will also be inserted. Which one comes first is up to you and doesn't make much of a difference. To check to see if your tag is installed correctly, you can get this plugin for Chrome here: https://get.google.com/tagassistant/.

Next, let's take a look at the Facebook Pixel. This code can be found under your business settings on Facebook. Once there, scroll down to "Data Sources" and click on "Pixels". If you do not have a pixel yet, you'll need to create one. Do this by clicking the "Add" button. A popup will appear and ask you to name your pixel. You may also opt to place your URL inside the "Check your website for easy set up options" or, simply click "Continue". Once the next popup appears, it'll provide you with two options. You want to select, "Set up the Pixel Now". Once the next screen loads, they'll provide you a few ways to get your Pixel installed on your website. If you're doing this yourself, you can choose the first option and have Facebook connect to your CMS and it'll install your code for you. If you're doing this yourself, but do not have or do not want to use the automatic service, choose the second option, "Manually add pixel code to website". If you aren't installing your pixel but have hired someone to do so, click on "Email instructions to developer" and they'll install it for you, possibly for a fee.

If you've chosen "Manually add pixel code to website", you'll be brought to a screen that has three steps. Step one will include the code that needs to be placed on the website just before the closing tag from earlier. This is setup for you to quickly copy by just clicking the textarea containing the code. An example of this code is below:

<!-- 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', 'XXXXXXXXXXXXXXX');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Once you've added the above code to each page of your website, you'll want to test to make sure that it is installed and tracking correctly. First you'll see that Step two has a toggle to turn on automatic advanced matching, you will want to leave this on. Then move to Step three, where you can enter every URL for your website and test to see if your tracking code is active and working. Alternatively, you can install the Facebook Pixel Helper plugin for Chrome which can also tell you if your pixel is installed correctly. You can find that plugin here: https://chrome.google.com/webstore/detail/facebook-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc

While you may think you're done, there's one more thing because of iOS 14 that we need to set up and that is your aggregated events. Once your Facebook pixel has been created, you'll want to visit your event manager. With your active pixel selected, you'll need to find the 'Aggregated Event Measurement" button in the middle of the page. Once you click the tab, click on the button "Manage Events" or "Configure Web Events". On the following page, you'll want to click on the domain that your website is hosted on or the domain in which you are currently working on the action of the pixel for and click the 'Manage Events" button for that domain. You'll want to make sure that your events are in the proper order, from least important to most important. Typically, the least important event is your "View Content" event and your most important is your "Purchase" or "Lead" event, depending on your website. Once you have set these events and placed them in the order a user would navigate them, you can set and then confirm the changes. Then you'll need to make sure that on the pages with events other than "View Content" have their pixel code updated accordingly.
For example, if a user has clicked your "Checkout" button, you'll want to change the event from "PageView" to "InitiateCheckout". Those changes are bolded below:

<!-- 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', 'XXXXXXXXXXXXXXX');
  fbq('track', 'InitiateCheckout');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=InitiateCheckout&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

You would make this change for all events that are not the default event "Page View". Including "Purchase" on your purchase confirmation or thank you page. Although you'll want to update your "Purchase" event with the total of the order and the currency used. The code for this is below:

fbq('track', 'Purchase', {
  value: 0.00,
  currency: 'USD'
});

With this additional information being sent to Facebook you'll open up additional optimization methods. Methods where you can optimize for a maximum value per purchase and limit your investments in prospects that aren't converting. These are things I'll cover in the future, but for now, if you've got these items set, you're good to start sending traffic to your website.

Hopefully this gives you a better idea of how to get your Google Analytics tracking codes installed, your Facebook Pixel working for you and how to adjust your tracking for the iOS 14 update and set your Aggregated events correctly. If you have any questions, drop us a line and we'd be happy to help. If you're all set to make the jump, join us on our next blog all about how to Review your stats and Evaluate your efforts.

Related posts

Review your Stats and Evaluate your Efforts

Review your Stats and Evaluate your Efforts

As you continue to work on your business, website and social media efforts, you'll want to review your stats and evaluate your efforts. This is done by reviewing the data that you have gathered over the past from traffic that you have been generating and driving to spread the word about your products and services. Lets jump into the last blog in our series on how to get your business online!

Posted
How to install Google Analytics and the Facebook Pixel

How to install Google Analytics and the Facebook Pixel

We all know that we must track our website visitors, understand how they're searching and finding our websites and understanding the processes they undertake while on our website. To enable this tracking I suggest using both Google Analytics and the Facebook Pixel. Having both of these tracking tags on a website will allow us to track critical KPI's and ensure that we're both putting our best foot forward and providing an amazing user experience for our customers.

Posted
How the Facebook Ad Auction Works

How the Facebook Ad Auction Works

How the Facebook Ad Auction Works, A deeper look at the equation controlling our lives. It may seem pretty straight forward, or you might think its completely crazy. Let's dispel any myths about how this equation works and how you can make it work better for you.

Posted