How to Add Google Analytics to a Website and Place a Pixel (5-Step Tutorial)
This has been updated from “How to Place a Google Pixel” to reflect the changes in the upcoming GA4 conversion, written with the help of our friends at Clickvoyant.
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, and e-commerce revenue — helping you better understand campaign performance so that you can better allocate funds and enable higher ROI. Because of its robust features and comprehensive data collection — and because it’s free — it’s the most widely used service of its kind. However, before you can reap the rewards of this powerful platform, you must properly set it up.
On July 1, 2023, Google Analytics 4 is replacing the Google Analytics we’ve known for more than a decade. This newer version is highly complex but much more powerful than the legacy version.
Think of GA3 as a model home, you walk in and maybe the fixtures and the paint aren’t exactly to your liking, but it functions and will handle all the basic needs. Now, think of GA4 as a home taken down to the studs. You can get it exactly as you need it to your design specifications, but you’ll have to hire a builder, architect, plumber, etc. This is the level of intention it will take to get GA4 set up correctly.
The most important (and complicated) step is the process of administering Google Analytics on your website with common plugins. This step-by-step tutorial will help you launch your tracking by guiding you through the process of creating a Google Analytics 4 account and publishing that pixel on a WordPress or Shopify site., as well as define the ancillary terms you need to know for successful execution.
What Is a Tracking Pixel and What Does It Do?
A tracking pixel is a piece of code that, when embedded on your company-owned websites and apps, can help you evaluate your marketing efforts and increase sales.
A tracking pixel is included in the header of each of your web pages, so that every time a page is loaded, the pixel is triggered and measures the user’s behavior and attributes.
Key Definitions:
- 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 at a time by a human operator. Scripting languages are often interpreted (rather than compiled).
- Header: The tag <head> is the beginning of your header. The header contains scripts, pixels, and JavaScript that loads elements on your website. The majority of pixels or 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 tag </head>.
- Plug-ins: Some plug-ins help with pixel placement. For WordPress, the header footer scripts plug-in comes in very handy because it allows you to place pixels and 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.
Why Would a Marketer Set Up a Tracking Pixel?
Pixels measure visits, clicks, and other digital behaviors. The more information that is known about customer behaviors on their websites and digital marketing campaigns, the better that marketers can adjust the marketing mix — and spend — for different channels.
What Can a Tracking Pixel Be Used For?
A tracking pixel allows marketers to track events, including email opens, ad impressions, website visits, form fills, transactions, and other digital behaviors. When customers and prospects perform these behaviors, marketers call it a conversion. Tracking pixels can also note the user’s operating system, location, browser type, operating system, and other attributes.
How Can You Tell If Your Tracking Pixel Is Working?
To check that a pixel is working in GA4, you can use the GTM/GA debugger tool. This Chrome extension will allow you to check Google Analytics implementations and the activity you collect from events. This allows you to see in real-time event data and check for the GA4 implementation in your browser. Then return to your analytics or ads manager platform. If the tracking pixel is working, you will see when it was last active (the current date and time for ads), and view your data coming in via the ‘Realtime’ dashboard in GA4.
Setting It Up
Ready to implement a pixel on your site? Here’s how to make it happen on different kinds of sites.
Step 1 – Create a Google Analytics 4 Property
In your Google Analytics dashboard, click on Admin > Create Account.
You will then be prompted to enter the Property details like name, reporting time zone, currency and other website setup information.
Step 2 – Create A Data Stream for the Web
One of the many benefits from GA4 is the collection of data across device types, including applications and websites. This new features requires you to set up a “Data Stream”. For the purposes of this tutorial, select “Web”.
This will prompt you to add the website URL and give it a stream name. The Data Stream name is what you will use for reporting and analysis, so this should be something you and others will recognize across the company.
Step 3 – Generate Your Pixel
Your next steps vary depending on what platform your site is built on. Google Analytics 4 has some suggested plugins that make it easy to copy and paste your GA4 tag ID for automatic integration into the platform. Here are some common data integrations:
Alternatively, you can choose to install the pixel manually.
Your tracking ID should look something like this: UA-44148842-1
Your pixel should look something like this:
<!– Google tag (gtag.js) –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=G-G9R99GTNNN”></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘G-G8R93GTNXK’);
</script>
Step 4 – Place Your Pixel
For WordPress, there are many plugins available that allow you to track with just the GA4 tracking ID, but if you want to add it without a plugin, you will need to place your base pixel in the header of your site. Log into your WordPress back end and locate your header file (Appearance > Editor > header.php). Next, find the closing </head> tag and paste your pixel above that line (see below).
Some custom WordPress themes have a special module in which to place your pixel. Consult the theme documentation for any special instructions.
On Shopify, it’s a bit easier. Simply add the pixel to your online store preferences.
- From your Shopify admin, go to the Online Store > Preferences
- In the Google Analytics section, click Manage pixel here.
- Click Connect your Google account.
- Select the Measurement ID for the GA4 property you want to connect to your store.
- Click Connect your Google Analytics 4 property.
Some commerce events will be tracked automatically including;
- Pageview
- Search
- View Product
- Add To Cart
- Begin Checkout
- Add Payment Info
- Purchase
Step 5 – Test Your Pixel
The easiest way to test your pixel is to simply check whether Google Analytics 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.
You should, however, continue to monitor the data that Google Analytics collects. If you notice any unusual spikes, or the reverse — no data collected for a period of time — check to see whether the pixel was installed properly. Unusual activity in Google Analytics might also indicate issues with your site.
If you want expert help with any part of your website set-up, get started with the web team at Hawke Media. Get a free consultation today and we’ll find the low hanging fruit to increase your web presence and marketing efforts right away.
