How to Track BigCommerce with GA3 and GTM in 2022

Even though it’s possible to set up eCommerce tracking in Bigcommerce using Google Analytics, it sometimes isn’t quite enough to meet your requirements. That’s when we turn to Google Tag Manager. If you don’t know what Google Tag Manager does, do feel free to hop on over to this article, to learn more about it.

Now then, let’s get right into it, shall we?

Setting up Google Tag Manager

Heads up! This step revolves around creating a Google Tag Manager account. Nothing else I swear. So if you already have one, you may skip this.

1. Enter tagmanager.google.com in your browser

2. Enter your account name, select country, add website URL, and select Web to use the container.

 

3. Click on create and accept the Terms of Service. You will then see the GTM tracking code jump right at you, in a pop-up window.

 

Now what you do, is copy the code from the first container.

Done? Great! Simple right?

Add Google Tag Manager Code in Bigcommerce

Now, log in to your Bigcommerce account and from the left menu, navigate to Advanced Settings >> Web Analytics as shown in the image below.

 

Check the Google Analytics checkbox under general settings

 

With me so far? Now, click the Google Analytics tab that appears on top of the page and paste the GTM code you copied earlier, in the tracking code field. Then, save the changes.

 

The next step is to connect your Google Tag Manager account with Google Analytics. We already have covered this topic in a previous article, you can read it here.

If you leave this as it is here, you should be able to track your website traffic in Google Analytics, if you’ve managed to not mess up any of the steps.  The next part deals with sending off the transaction data, to Google Analytics, via The GTM.

Adding Ecommerce Code

Since the Google Tag Manager uses a data layer to collect data, you will have to push the transaction details to the data layer, This requires a good grip on JavaScript and an understanding of eCommerce tracking.

Simply copy the below code and paste it before the Google Tag Manager code you added in Bigcommerce in the previous step.

<script type="text/javascript">
window.dataLayer = window.dataLayer||[];
function trackGTMEcommerce() {
    this._addTrans = addTrans;
    this._addItem = addItems;
    this._trackTrans = trackTrans;
}

var transaction = {};
transaction.transactionProducts = [];

function addTrans(orderID, store, total, tax, shipping, city, state, country) {
    transaction.transactionId = orderID;
    transaction.transactionAffiliation = store;
    transaction.transactionTotal = total;
    transaction.transactionTax = tax;
    transaction.transactionShipping = shipping;
}


function addItems(orderID, sku, product, variation, price, quantity) {
    transaction.transactionProducts.push({
        'id': orderID,
            'sku': sku,
            'name': product,
            'category': variation,
            'price': price,
            'quantity': quantity
    });
}

function trackTrans() {
    transaction.event = 'transactionSuccess';
    dataLayer.push(transaction);
}

var pageTracker = new trackGTMEcommerce();
</script>

Save changes in Bigcommerce.

Setting up the transaction tag in GTM

Okay, let’s create a tag now.

Go to your Google Tag Manager account and select create a new tag.

Add the tag name as ‘GA – Ecommerce Tracking’

Select tag type as ‘Universal Analytics’

Select track type as ‘Transaction’

Select Google Analytics settings variable

Click the triggering option and create a new trigger

Enter the trigger name as ‘Purchase Complete’

Select trigger type as ‘custom event’

Enter event name as ‘transactionSuccess’

 

Now, if you’ve done this right, overall transaction tag and will look similar to the one below

 

Save this tag and do not publish changes just yet. .

Okay then, on we go.

Blocking Duplicate Transactions in Google Analytics

One of the main reasons we are using Google Tag Manager is to block duplicate transactions in Google Analytics. If you have ever tried to implement Google Analytics ecommerce tracking, you will see duplicate transactions in Google Analytics. This will make all your data inaccurate and will not match with the data recorded in your internal server.

Setting up ecommerce tracking with Google Tag Manager will also result in duplicate transactions but we have an easy way to block duplicate transactions via GTM by creating a cookie.

Enable Ecommerce Tracking in Google Analytics

Open your Google Analytics account, go to the admin panel.

I’ll wait for you to find it.

Found it?

Now, create a new view and name it ‘Test View’.

Under the view option, click Ecommerce Settings, and then, enable ecommerce.

 

Done?

Save changes.

Setting up the Right currency in Google Analytics

By default, the currency in Google Analytics is set to the US Dollar ($). If you don’t sell stuff in the US, you will have to change the currency settings in Analytics. To do this, just click ‘View Settings’, now scroll down to ‘currency’. Select the correct currency from the drop-down, and you’re done!

 

Now, save the changes.

Setting up Referral Exclusion list in Google Analytics

If you are using PayPal or any other payment gateway, you will need to add the payment gateway domains to the referral exclusion list. Doing this will help Google Analytics attribute the conversion to the right traffic source.

To do this, click on tracking info under property and click on referral exclusion list. Add all the domains to exclude from your referral traffic.

 

Testing Ecommerce Tracking

Now, let’s make sure that the ecommerce tracking works correctly. First, open preview mode in Google Tag Manager. Next, in a separate tab, open your website. Now, make a test purchase using your own credit card. You can also use a 100% discount coupon, if that suits you, just go with the easier option.

Now you wait. Give it an hour, and then open your Google Analytics account. Select the test view. Now, navigate to Conversion >> Ecommerce >> Overview and set the date range to include today. If you are able to see the transaction data for the product you purchased, you are good to publish the tag manager changes. If however, you can’t see the ecommerce data, check if you’ve followed all the steps correctly, and wait a little more.

Once you verify the ecommerce data, create one more view and name it, ‘Master View’. Enable ecommerce tracking, select currency, exclude bot traffic and use this view for data analysis.

Setting up Ecommerce Purchase Goal Funnel

Ecommerce goals are not difficult to set up if you have a good understanding of Google Analytics. Navigate to your analytics admin, select the Master View and click goals.

Create a new goal

Select the goal setup as ‘custom’

Enter the name as ‘Purchase Completed’

Select the goal type as ‘destination’

Enter the rest of the details as displayed in the image below

 

Save this goal.

What’s Next?

After setting up ecommerce tracking, it’s time to find the relevant reports in Google Analytics. Most of the analytics users aren’t aware of what and where to look for relevant data. Considering the difficulties our clients face, we came created an ecommerce data studio report which is available for everyone to use.

This report will help you see the relevant ecommerce data without logging in Google Analytics.

Click on the above button to copy the template.

Having trouble or anything to ask? Please let us know in the comments below.