How to Place a Google Analytics Pixel (3-Step Tutorial)

November 8, 2018

Tracking user behavior and data on your site is imperative to running a successful digital business. Google Analytics is a free data analytics platform that lets you measure all kinds of data related to your web traffic and user behavior on your site, like time on site, bounce rate, ecommerce revenue, and even return on investment (ROI) when it comes to your digital ads. Because of its robust features and comprehensive data collection, it's the most widely used service of its kind. However, before you can reap the rewards of this powerful platform, you must first properly set it up. The most important (and complicated) step in this process is placing a pixel (defined below) on your site.This step-by-step tutorial will help you launch your tracking by guiding you through the process of placing the pixel on a WordPress or Shopify site.

Key Definitions:

Pixel: Pixel-based tracking is the process of using a 1X1 pixel transparent gif to track a visit or event on a web page, ad impressions on social, the opening of an email, and much more. On web pages, pixel tracking is an alternative to javascript tracking. For the sake of this training, we will use the word pixel generally to talk about everything we would place for tracking.
Javascript: An object-oriented computer programming language commonly used to create interactive effects within web browsers.
Script: A scripting or script language is a programming language that supports scripts: programs written for a special run-time environment that automates the execution of tasks that could alternatively be executed one-by-one by a human operator. Scripting languages are often interpreted (rather than compiled).
Header: <head> is the beginning of your header. The header contains scripts, pixels, and javascript that loads elements on your website. The majority of pixels/scripts will be placed in your header. You can access your header in your index.liquid files on Shopify, or your header.php file on WordPress. It's closed with the following: </head>.
Plugins: Some plugins help in pixel placement. For WordPress, the header footer scripts plugin comes in very handy because it allows you to place pixels/scripts on individual pages, like thank you pages.
Events: Events are specific codes placed to track specific page activities. For example, you could track add to carts, leads, checkout started, checkout completed and more.

Step 1 - Generate Your Pixel:

For this Google Analytics pixel tutorial, we will use be using a test pixel. To find to your pixel, log into your Google Analytics account, set up the account using Google's setup wizard, and generate the code. You should get the code on one of your final screens.

Your tracking ID should look something like this: UA-44148842-1‍

Your pixel should look something like this:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-44138842-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-99999999-9');
</script>

Step 2 - Place the Pixel:

‍

For WordPress, you will need to place your base pixel in the header of your site. Log into your WordPress backend and locate your header file (Appearance > Editor >header.php). Next, find the closing </head> and paste your pixel above that line (see below):

Hawke Media Google Analytics Pixel Tutorial_2.png

On Shopify, it’s a bit easier. Simply add it to your online store preferences, shown below:

Hawke Media Google Analytics Pixel Tutorial 3

Step 3 - Test Your Pixel:

The easiest way to test your pixel is to simply check to see if GA has registered any traffic for your site!You can also go to builtwith.com, enter your URL and scroll down to Advertising. You should see Google Analytics there if your pixel was placed properly.