Server-side Google Analytics 4 for BigCommerce

After Universal Analytics sunset, Google Analytics 4 (GA4) became one of the most popular analytics tools. If you are going to use or already use server-side GA4 and want to connect it to your BigCommerce website, you are in the right place.

In this article, we will consider the advantages of server-side tracking for GA4, how your business can benefit from it, and how to set up server-side BigCommerce GA4 integration.

Benefits of server-side tracking for GA4

Server-side tracking for GA4 provides a lot of advantages in terms of data accuracy, security, and performance. It addresses limitations associated with client-side tracking and offers a more reliable solution for data analytics needs.

• Enhanced data accuracy. Unlike client-side tracking, server-side tracking processes data on the server. Thanks to it, the risk of data loss due to ad blockers or browser restrictions is significantly reduced.
• Higher security and privacy. Server-side tracking helps comply with privacy regulations like GDPR and provides better control over data collection and processing.
• Better website performance. Switching to the server reduces the load on the visitors’ browser, improving user experience and site performance. The browser has fewer scripts to execute on the client side, so page load times decrease.
• Enhanced attribution and cross-device tracking. Server-side tracking provides better cross-device and cross-platform tracking, as it relies less on cookies and more on server-side identifiers. This helps you better understand the users’ path and, hence, optimize your marketing campaigns.

Before you begin

Set up server GTM container

The sGTM container serves as an intermediary endpoint that you can control. It is positioned between your website/app visitors, where events are recorded, and third-party endpoints such as GA4.

When you create a server GTM container for server-side tracking, you will need a place to host it. Stape provides appealing hosting terms:

• compared to the Google Cloud Platform, you will be able to pay up to seven times less (depending on your plan)
• no need for additional actions when you run out of resources (RAM, CPU) - we will add them automatically

Configure BigCommerce app for server GTM

Make sure you have installed Stape’s app for BigCommerce. The app has the following benefits:

• Add web GTM script to all the pages of the website automatically.
• Send webhooks to your server GTM container.
• Benefit from features such as Custom Loader (it eliminates the harmful impact of ad blockers) and Cookie Keeper (it prolongs cookies' lifetime, bypassing browsers’ restrictions) for Stape’s users.

To check if you have the BigCommerce app added, go to any page on your website → open the browser’s console → Network tab, → enter the container ID without the “GTM-” part. If you see a request status 200, then everything works.

How to set up server-side GA4 for BigCommerce

Here there are two options to choose from to integrate BigCommerce Google Analytics 4; click on the one that fits your case:

1. You already have GA4 set up in your web GTM container, and you want to switch it to server-side

2. You don’t have GA4 set up

1. If you already have GA4 set up in your web GTM container, and you want to switch it to server-side

1.1 Add the server container URL to Google Tag settings. In the section “Configuration settings”, add the parameter server_container_url and the tagging server URL as values.

1.2 Go to your server GTM container and create a Google Analytics 4 client.

Open section Clients → New → client type Google Analytics: GA4 (Web) → Add the name → Save. 

1.3 In the server container go to Tags section → New → tag type Google Analytics: GA4.

Add Measurement ID - find it in your GA4 account in the Admin section → Data streams → Web tab → Web data stream. 

Add Event name - the name that will be sent to GA4 reports. If you leave this field blank, the same name will be used as in your GA4 tag on the web container.

Add a name for a tag and click “Save”.

1.4 In the tag you set up in the previous step, go to the Triggering section and configure trigger: Create trigger → Custom type → Trigger fires on “Some events” → Client name equals GA4 (or the event name you added in the previous step) → Save.

2. If you don’t have GA4 set up

2.1 Inside the web container, go to Tags section → New → Google Tag type. Add your Google tag ID.

Below set up a trigger. The tag should trigger on standard “Initialization - All Pages”.

2.2 Set up additional events (optional)

The Google tag will generate some basic GA4 events (session_start, page_view, etc.). However, if you want to track some extra events, you will need to configure each event using a separate tag.

Below we will provide an example of setting up a custom event add_to_cart.

a. Set up the variable

To do it, go to the Variable section of your web container → User-Defined Variables → New → “Data Layer Variable” type → specify the path to the required value as it appears in the data layer.

Each ecommerce event must include at least three parameters:

• value
• currency
• items

Refer to Google’s official documentation for the standard and mandatory payload of ecommerce GA4 events

So, taking as an example these three parameters, you will need to create three variables:

• for value path: ecommerce.value

• for currency: ecommerce.currency
• for items: ecommerce.items

b. Set up event tag

Go to the Tag section → New → tag type: Google Analytics: GA4.

Fill in the following parameters:

• Measurement ID - to find it, you need to go to your GA4 account in the Admin section → Data streams → Web tab → Web data stream
• Event name - add_to_cart (in our case)
• Event parameters - add three variables you created in the previous step as value

c. Set up an event trigger

In the tag below the tag configuration, click on the section “Triggering”. Create a new trigger with the type “Custom Event”, and add a name for it (in our case, “add_to_cart_stape”). The trigger should fire on “All Custom Events”.

2.3 Configure GA4 in the server GTM

After configuring GA4 in the web container, you need to do the same for the server GTM container. To do this, follow the instructions in the section “You already have GA4 set up in your web GTM container, and you want to switch it to server-side”.

Verifying the setup

GTM Preview Mode

In GTM, open Preview Mode for both web and server containers and interact with the website to trigger events (e.g., adding an item to the cart). If everything works correctly:

• In the web container preview, you will see GA4 tags fire
• in the server container preview, GA4 requests claimed by GA4 tags should appear

Website console

On any page of your website, open the console → go to the Network tab → enter GA ID, and ensure the request URL contains the tagging server URL.

GA4 DebugView

Go to Admin of your GA4 → Data display → DebugView. In this section, you should see that events are being tracked and appear in GA4.

Resolving setup issues

The most common mistake is the wrong Tagging Server URL in the GA4 configuration tag within the web GTM container.

To find your tagging URL in the Stape Admin account, go to sGTM containers and look for “Domains (Tagging Server URLs)”.

Then go to your web container, find the GA4 configuration tag, and compare it with the server URL from the admin account.

Conclusion

Setting up server-side Google Analytics 4 for BigCommerce website is an effective way to obtain the most precise data and, hence, make data-driven decisions. The setup process is easy as a breeze and takes a few steps to complete.

If you’ve had difficulties with the installation process, feel free to email Stape’s support team at support@stape.io, and we will be happy to assist you.