How to Install Google Analytics and the Meta 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 Meta 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. If you're looking to include your Meta pixel and your Google Analytics tag within one code, checkout our blog on How to install the Meta Pixel with Google Tag Manager.
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:
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 Meta 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 Meta 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 Meta 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:
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 Meta 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:
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:
With this additional information being sent to Meta 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 Meta 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.
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 Meta 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 Meta 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 Meta 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:
<!-- Meta 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 Meta 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 Meta 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:
<!-- Meta 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 Meta 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 Meta 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 Meta 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.
Pinterest
Twitter
Facebook
