How to Track Conversions Easily

How to Track Conversions with Google Analytics 4 (GA4) #

Tracking conversions on your website is crucial for understanding user behavior and improving your business performance. With the introduction of Google Analytics 4 (GA4), the process has changed slightly. Here's how to set up conversion tracking for your Shopify store using GA4:

Step 1: Create a Google Account and Google Analytics Account #

If you don't already have a Google account, you'll need to create one. This doesn't have to be a Gmail account; it can be any email address. Once you have a Google account, you can create a Google Analytics account.

Step 2: Create or Move a Google Analytics 4 Property #

To use GA4, you need to either create a new GA4 property or move an existing one. After setting up your property, create a web data stream. Make note of the Tag ID, as you'll need it for the next step.

Step 3: Add Google Analytics 4 Tags to Shopify #

To add GA4 tags to your Shopify store, follow these steps:

1. From your Shopify admin, go to Online store > Preferences.
2. In the Google Analytics section, click "Manage pixel here".
3. Click "Connect your Google account".
4. In the "Your Google Analytics property" section, select the tag for the GA4 property you want to connect to your Shopify store.
5. Click "Connect".

It is important to understand tracking as it will be very useful to run AB Tests on Shopify Websites.

If you don't have the Google & YouTube channel installed, you'll be prompted to install it during this process. Note that you don't need to connect to the Google Merchant Center to complete your GA4 tags setup.

Understanding Conversion Tracking in GA4 #

In GA4, conversion tracking is now referred to as "Key Events". These are the important actions you want to track on your website, such as purchases, sign-ups, or other valuable user interactions.

With GA4 properly set up on your Shopify store, you'll be able to track these key events and gain valuable insights into your customer's journey, helping you make data-driven decisions to improve your store's performance.

Remember, while Shopify provides its own analytics, integrating GA4 allows for more comprehensive tracking and analysis of your entire customer funnel and behavior.

If you've recently updated to Shopify Checkout 2.0 and need help maintaining your conversion tracking, refer to our guide on How to move to Shopify Checkout 2.0 and keep tracking conversions.

For those who haven't yet updated to Checkout 2.0, you can use our ready module found at Upgrade Shopify Checkout 2.0 (Shopify Extensibility).

Additional Tracking Options #

If you want to send more than just the basic data to GA4, you will have to use Shopify Customer Events API.

Shopify offers a tool called the pixels manager to help you track customer actions on your website. This tool lets you add and manage special codes (called pixels) that monitor what customers do, like clicking links or adding items to their cart.

Before, store owners had to manually add tracking codes in different parts of their online store. This was often complicated and time-consuming. Now, with the pixels manager, all your tracking codes are in one place and work more safely.

Adding these tracking pixels to your store can help you:

• See what customers are doing on your website, including during checkout
• Keep your store and customer information more secure
• Stop other codes from slowing down your website or causing problems
• Make sure you're following privacy rules

You can add pixels in two ways:

1. Through marketing apps that install them for you
2. By having a developer add custom pixels manually

This new way of tracking makes it easier to understand your customers and improve your store, without needing to be a tech expert.

Custom Pixel Tracking #

First we need to prepare the pixel code. Here is an example of a custom pixel code:

Here is an example of a Meta pixel. Pixels will differ slightly from one third-party to another.

​​<!-- Meta Pixel Code -->
​​
<script>
  !function(f,b,e,v,n,t,s)...
</script>
<noscript>
  <img ..... />
</noscript>
<!-- End Meta Pixel Code -->

After removing the HTML from Meta's code, you're left with Meta's pixel SDK and code to initialize it. The PageView event tracking code has also been removed, because it'll be added in the next step.

​​!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)};

Keep in mind that Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

You might come across pixels that are loaded using script src=. HTML isn't supported in Shopify's pixels, so you'll need to replace script src= with the JavaScript equivalent.

Here's a sample Google Analytics pixel:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="code.js"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

The script src= portion can be replaced by the JavaScript equivalent. Always ensure your src attribute matches the HTML version:

const script = document.createElement("script");
script.setAttribute("src", "code.js");
script.setAttribute("async", "");
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "YOUR_PIXEL_ID");

Okay, it became a bit more complicated ))) #

If you're not a developer, you might find it challenging to add custom pixels to your Shopify store. In this case, you can hire a developer or an agency to help you set up custom pixel tracking.