Stape

How to add Google Analytics and Facebook pixels to WordPress using Google Tag Manager server-side container (WordPress plugin)

Author
Stape
Published
January 10, 2021

Looking to set up a Google Tag Manager Server container on your WordPress site? Not sure if you need server-side tagging? If so, then this article is right for you. I will show you how to correctly set up Server-Side Tagging in WordPress (including WooCommerce stores) and explain the benefits. I will guide you on how to push Universal Analytics and Facebook tracking from the server-side.

What is Google Tag Manager Server Container for WordPress?Copy link to this section

Google Tag Manager Server Container was released in summer 2020. Like Google Tag Manager web container, server-side tagging was created to manage different tracking pixels called ‘tags’ on your website. But the technology behind server containers 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 the client-side (user browser). Let me show you the difference between web and server tagging on the Universal Analytics example. If you are running a UA script on the web container, your website connects to analytics.google.com and sends a collect request to your UA property. If Universal Analytics is running via a server container, requests are sent to the cloud server. And this cloud server sends information to your UA account. 

What are the main benefits of using Server-Side Tagging on your WordPress (WooCommerce) site?Copy link to this section

1. Faster site speed

You will reduce the page weight due to requests and javascript not being loaded in the browser. Everything will be processed on the server. We have a case study that compares the page speed difference between running scripts on the web vs. the server container.

2. Transitioning from 3rd party cookies to first-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 to use algorithms that prevent user tracking like Safari’s “Intelligent Tracking Prevention” (ITP) and Firefox’s “Enhanced Tracking Prevention” (ETP). In 2020, Google announced a plan to end the support of third-party cookies. And with the AdBlocker popularity growing annually by 1-2%, the share of users blocking ads grows. For instance, around 27% of US users browse with ad blockers. 

If you are running a server container from a custom subdomain within your main website hierarchy, you will make a 3rd party cookie – 1st party.

3. Complete Data Control.

You own all data and decide what information to send to each platform. Third-party vendors (like Google Analytics, Facebook pixel, etc.) will not get any information they want, only the data you send to them via a 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. 

Adding Google Tag Manager Server Container to WordPress (and WooCommerce): A Step-by-Step GuideCopy link to this section

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. Open https://tagmanager.google.com/, choose the website where you want to set up server-side tagging. Click Admin and + on the container section. Add container name, and in the target platform, select server and click create.

set up stape sGTM container

2. In this step, you need to set up your tagging server. Choose Manually provision tagging server and copy your Container Config. We will need it for the next steps.

3. Create an account inside our service. Open this link and follow the instructions. If you already have the account, choose settings, container config, and paste Container Config from the previous step. If you do everything correctly, the status of your container will change to Running.

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

set up server GTM container

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

GTM server side plugin

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

• 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 Stape.io account under Tagging server URL. 

• Add your Google Tag Manager web container ID. 

google tag manager server-side for wordpress options

7. If you have an eCommerce website and want to track enhanced e-commerce events inside WooCommerce, 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. 

Configure Google Tag Manager for WordPress plugin:

• Add your Web Google Tag Manager ID

• Click on the Integration tab, choose WooCommerce, and enable Track enhanced e-commerce.

• 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.)”. You can find GTM Server-Side URL  inside your GTM server account under Tagging server URL.

Update existing GTM web container configuration

8. Test your setup. If you’ve done everything correctly, you should see dataLayer events in the Google Tag Manager web container. 

Setting up server-side Universal Analytics on your WordPress (WooCommerce) siteCopy link to this section

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

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

server-side universal analytics wordpress

10. In this step, we’ll configure the Universal Analytics tag inside the web container that will send enhanced e-commerce events to the Server container. 

Start with creating a new Universal Analytics Tag inside the web container. Use these settings:

• Track Type: event

• Category: EnhancedEcommerce

• Action: select variable {{Event}} (if you don’t see the 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.

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.

11. Test tag that you’ve created in the previous step. To do that, enable web and server container preview modes. Click on the event name, check that GTM sees variables and event data.

12. In case you want to have a separate variable for each product data, you can create a custom variable. In the example below, I extract the item_id. To do that, go to variables, choose type Event Data, critical path items.0.item_id

13. If you want to take full advantage of the server-side Universal Analytics setup, I suggest sending UA requests from a custom subdomain. It will help you improve UA 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 the 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)Copy link to this section

15. Add Facebook server tag template into Google Tag Manager Server Side container. 

16. Create a tag inside the server container that will fire the Facebook tag that you’ve just imported. You will need to specify the API access token and Facebook pixel ID. To create an API token, follow this instruction. You may also want to add a Test ID. You can find the test ID in your Events Manager inside the Facebook Business Manager.

facebook conversion API for wordpress

17. Our tag automatically maps Universal Analytics events into standard FB events. If mapping of the event is not possible, then we 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

18. Open Events Manager inside Facebook Business Manager -> click on Test events. You should see the events there. If everything is correct, publish your GTM web and server events changes.

Test your events

Conclusion:Copy link to this section

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

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

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

Host your GTM server at Stape

By signing up you agree to Stape’s Terms and Conditions and Privacy Policy