Server-side Tagging For WordPress (WooCommerce): adding Google Analytics and Facebook Conversion API

Looking to set up server-side tagging on your WordPress site? Not sure if you need server-side tagging? If so, then this article is for you. I will show you how to correctly setup Server-Side Tagging for WordPress (including Woocommerce) and explain the benefits. Will also guide you on setting up Universal Analytics, and Facebook Conversion API using Google Tag Manager server-side container.

What is Google Tag Manager Server Container for WordPress?

Google Tag Manager Server Container was released in summer 2020. Similar to web container, server-side tagging was created to manage tracking pixels called ‘tags’ on your website. But the technology behind the server container is entirely different from what we used to have in the web container. Google also added a new object to the server container that is called “Client”.

Server-Side Tagging for WordPress allows you to run the tracking scripts on the cloud servers instead of client-side (user’s browser). Let me show you the difference between web and server tagging using Universal Analytics as an example. If you are running a UA script on the web container, your website will connect to analytics.google.com, and it will send a collect request to your UA property. If Universal Analytics is running via a server container, requests will be sent to the cloud server. And this cloud server will send information to your UA account.

What are the main benefits of using Server-Side Tagging on your WordPress (Woocommerce) site?

1. Faster site speed.
You will reduce the page weight since requests and javascript won’t’ be loaded in the browser. Everything will be processed on the server. We have a case study that compares the page speed difference for web vs server container.

2. Transitioning from 3rd party cookies to 1st party.
During the last several years user privacy has become one of the hottest topics in the digital world—we have regulations like GDPR (EU) and CCPA (California). Browsers started using algorithms that prevent user tracking: Safari’s “Intelligent Tracking Prevention” (ITP) and Firefox’s “Enhanced Tracking Prevention” (ETP). In 2020 Google announced that in a few years they will phase out third-party cookies. Ad blockers popularity is growing by 1-2% every year, and now around 27% of the US internet users have ad blockers. If you are running a server container from a custom subdomain within your main website hierarchy, 3rd party cookie will be considered as a 1st party.

3. Complete Data Control.
You own all data and decide what information to send to each platform. 3rd party vendors (like Google Analytics, Facebook pixel, etc.) won’t get any information they want, only data you send them via cloud server.

4. Hide Tracking IDs and Secret API keys.
If you are using server-side tagging, tracking IDs and API keys will be hidden from users. It will help you, for example, prevent spam in Google Analytics

Adding Google Tag Manager Server Container to WordPress (and WooCommerce) – Step by Step:

  1. The first thing you need to do is create a Google Tag Manager server container (if you don’t have a web container, you need to set it up first, follow this instruction from Google). To create server container go to https://tagmanager.google.com/, choose the website where you want to set up server-side tagging. Click Admin and click + on the container section. Add container name, in the target platform select server and click create.
set up Google tag manager server container on wordpress create container

2. Choose Manually provision tagging server and copy your Container Config. We will need it on our next steps.

set up Google tag manager server container on wordpress container config

3. Create an account inside our service via this link. If you already have the account, choose settings, container config and paste Container Config from the previous step. Click Create Container. If you have done everything correctly, the status of your container will be Running. If you don’t see the status Running, please wait up to 10 minutes and then refresh the page. 

4. Copy tagging server URL from our service. Open Google Tag Manager server container, go to Admin settings and click Container Settings. Paste tagging server URL.

5. Add GTM server plugin to your WordPress website. Go to plugins tab inside your wp-admin, click add new, search “GTM server”, click install now and activate.

6. Configure plugin setting. If you are NOT planning to track enhanced eCommerce events, please use settings described in this step (for eCommerce/WooCommerce tracking, go to the step below):

  • Placement type: Add Google Tag Manager web container on all pages. If you have other GTM plugins, please disable them.
  • Add the GTM Server-Side URL. You can find it inside your GTM server account under Tagging server URL 
  • Add your Google Tag Manager web container ID.
set up Google tag manager server container on wordpress GTM server plugin settings

7. If you have eCommerce/WooCommerce website and want to track enhanced e-commerce events, then follow these instructions:

  • To make eCommerce tracking work correctly, you need to install another plugin. Click add new plugin and find Google Tag Manager for WordPress By Thomas Geiger. Add it to your website and click activate. 
set up Google tag manager server container on wordpress GTM server ecommerce

Configure Google Tag Manager for WordPress plugin:

  • Add your Web Google Tag Manager ID
  • Click on Integration tab, wooCommerce and enable Track enhanced e-commerce.
set up Google tag manager server container on wordpress ecommerce settings
  • Return to GTM server WP plugin settings. Choose the first option: “Update existing GTM web container configuration for working with your server-side container. (This option is not enabled if we can’t find an existing web container.)”. And add GTM Server-Side URL, you can find it  inside your GTM server account under Tagging server URL. Click Save Changes.  
set up Google tag manager server container on wordpress plugin settings

8. Test GTM set up. If you’ve done everything correctly, you should see dataLayer events with parameters inside the preview mode. 

set up Google tag manager server container on wordpress test events in GTM


Setting up server-side Universal Analytics on your WordPress (Woocommerce) site:

9. Open Google Tag Manager web container, go to Universal Analytics variable and add Transport URL. This is the same URL you’ve added to the Google Tag Manager server container on step 4. 

Make sure you’ve enabled Enhanced Ecommerce inside Google Analytics view settings.  Choose {{event}} variable inside Read data from variable.

set up google analytics server-side tagging on wordpress
set up google analytics server-side tagging on wordpress Google Analytics ID

10. Open Google Tag Manager Server container and create a Universal Analytics tag.
Tag type = Google Analytics: Universal Analytics
Create a new trigger. Trigger type = custom. It should fire when Client Name equals Universal Analytics.

google tag manager server universal analytics client

11. In this step will configure Universal Analytics tag inside the web container that will send enhanced e-commerce events. 

Start with creating a Universal Analytics Tag inside the web container (or updating existing one if UA tag was already set up). Use these settings:

  • Track Type: event
  • Category: EnhancedEcommerce
  • Action: select variable {{Event}} (if you don’t see event variable make sure you’ve enabled it inside the variables section)
  • Google Analytics settings: Choose your Universal Analytics ID 
  • Select Enable overriding settings in this tag
  • Click More Settings -> E-commerce -> Select True, enable Use Data Layer.
set up google analytics server-side tagging on wordpress google analytics tag

Create a trigger that will fire this event:

  • Trigger type: custom event
  • Event name: 

gtm4wp.productClickEEC|gtm4wp.addProductToCartEEC|gtm4wp.removeFromCartEEC|gtm4wp.checkoutOptionEEC|gtm4wp.checkoutStepEEC|gtm4wp.changeDetailViewEEC

Enable Use regex matching

set up google analytics server-side tagging on wordpress create trigger

12. Test UA tag that you’ve just created. To do that enable web and server container preview mode. Click on the event name, check that GTM sees variables and event data. Don’t forget to publish changes. Log in to your Google Analytics and check that it collects eCommerce data. Note that there might be several hours delay in data.

set up google analytics server-side tagging on wordpress test event data

13. In case you want to have a separate variable for each product parameter, you can create a custom variable. In the example below, I extracted item_id. To create variable, go to variables sections inside GTM, choose type Event Data, key path items.0.item_id

set up google analytics server-side tagging on wordpress custom variable

14. If you want to take the full advantage of server-side Universal Analytics set up, I suggest using a custom subdomain for your tagging URL. It will help you improve UA’s data quality since Adblocker and ITP won’t block UA requests. Please follow this guide to create and set up a custom subdomain for your server container. After the custom domain is set up, do not forget to update tagging URL inside GTM server WP plugin, Google Tag Manager server container, Universal Analytics variable inside your Google Tag Manager web container.

Setting Up Facebook server-side pixel on WordPress (WooCommerce)

15. Download Facebook tag template from GitHub repository.

16. Import Facebook server tag template into Google Tag Manager Server Side container. Click on Templates -> Tag Templates -> New. Then on the right upper corner, click on dots, and choose import.

set up facebook server-side tracking on wordpress

17. Create a tag inside the server container that will fire Facebook tag that you’ve just imported. You will need to specify API access token and Facebook pixel ID. To create an API ticket, follow this instruction.  You may also want to add a Test ID. You can find test ID in your events Manager inside the Facebook business manager. Choose trigger Universal Analytics (the one we created on the step 10).

18. Our tag automatically maps Universal Analytics events into standard FB events. If mapping of the event is not possible, then it’ll record this event as a custom event inside FB using Universal Analytics name. We will also pass product parameters like product_id, category, etc. 

gtm4wp.addProductToCartEEC = add_to_cart

gtm4wp.productClickEEC = view_item 

gtm4wp.checkoutOptionEEC = begin_checkout 

gtm4wp.checkoutStepEEC = add_payment_info 

gtm4wp.orderCompletedEEC = purchase 

 

19. Open events manager inside Facebook business manager -> click on Test events. You should see events here. If everything is correct, publish your GTM web and server container changes.

Conclusions: 

Hope you’ve successfully set up Google Tag Manager server-side tagging on your WordPress (Wocommerce) site. Universal Analytics and Facebook pixels are working from the server. It means that now conversion tracking is more accurate, data more secure and website works faster. 

GTM Server Side Tagging does not entirely replace the need for traditional tracking setup. Your website will need trigger events to send the GTM Server.

If you need help to carry it out, do not hesitate to count on us!