The Data Layer is an object that makes available in real time the information that is executed by users while browsing the WooCommerce Store.
Feature Overview
↑ Back to topWith Datalayer for WooCommerce enabled, you will have all actions available in an easily readable javascript object via Google Tag Manager or code and thus evaluate the following advanced eCommerce activities:
- Product Impressions
- Product Clicks
- Product Detail Impressions
- Add / Remove from Cart
- Checkout
- Purchases
We follow the Google Tag Manager standard.
Installation
↑ Back to topSee the steps to install the plugin:
- Download the extension from your WooCommerce dashboard.
- Go to Plugins > Add New > Upload and select the ZIP file you just downloaded.
- Click Install Now and then Activate.
Activation
↑ Back to topGo to menu WooCommerce > Datalayer for WooCommerce:
Google Tag Manager ID -> Enter the GTM-XXXXXX ID to activate the Google Tag Manager code snippet
DataLayer for WooCommerce Enhanced Ecommerce -> Enable this option if you use Google Analytics UA with Google Analytics 4 (GA4) tags as a complement to UA
DataLayer for WooCommerce Ecommerce GA4 -> Enable this option if you use only Google Analytics 4 (GA4)
Activate Test Debugger Bar -> Enable this option to test Datalayer events on your site with the debug bar, by default, turned off
Trigger Purchase only once -> When a user refreshes the thank you page, the purchase event is not sent again. Prevent duplicate transactions in analytics
Events with Javascript -> Enable this option via javascript as an alternative when your theme fails to load the hook add_to_cart with php.
Custom domain GTM Server Side -> Send Google scripts gtm.js directly from your tagging server – Leave empty if you don’t use GTM Server Side
Product Brands -> Select the taxonomy containing Product Brands
Download import File GTM -> Download gtm import file
Usage
↑ Back to topSee how to use the plugin with:
Google Tag Manager
↑ Back to topIf you want to use it together with Google Tag Manager, you will see in the debug the DataLayer already mapped.
Enhanced Ecommerce (UA)
Ecommerce (GA4)
Facebook Pixel Code and Pinterest Ads
TikTok Pixel
GA4 and Facebook API (Server Side)
Javascript
↑ Back to topExtra Settings
↑ Back to topIf you use Google Tag Manager, we will help you configure all available options mapped with our Datalayer.
Import Google Tag Manager
↑ Back to topDownload the workspace.zip file in WooCommerce > Datalayer for WooCommerce > Download import File GTM or to the main of the plugin folder.
Go to Google Tag Manager > Admin > Import Container:
Select the file you want to import:
GTM-UA-with-GA4-complement.json -> If you want to use Analytics UA tags and variables, GA4 as a complement, Google ADS (optional), Facebook Pixel Code (optional), Facebook API (optional), Pinterest Ads (optional) and TikTok Pixel (optional).
GTM-GA4.json -> If you want to use Analytics GA4 tags and variables, Google ADS (optional), Facebook Pixel Code (optional), Facebook API (optional), Pinterest Ads (optional) and TikTok Pixel (optional).
After selecting the file, import the tags:
After import, it will look like this:
Settings Universal Analytics
↑ Back to topIn GTM, go to the variables menu and add your Google Analytics UA and click save.
In your Analytics > Ecommerce Settings, activate Advanced Ecommerce and configure the funnel steps like the image below:
GA4 as a complement to the UA
If you want to use UA with GA4, configure analytics as per the link: https://support.google.com/analytics/answer/9744165
In GTM, go to the tag GA4 – Tag and add your measurement id and click save.
Settings Google Analytics 4
↑ Back to topIf you will only be using Google Analytics 4, follow the steps below:
In Analytics 4 > Dataflow > Web Stream Details you will see the measurement id:
In GTM, go to the Tags menu and select the tag GA4 – Tag, enter the id of your GA4 and click on save:
Settings Google ADS
↑ Back to topConversions
In Google ADS > Tools > Conversions – Create three conversions for e-commerce: Purchase, Add to cart and Begin Checkout:
In Conversion, copy the Conversion ID and Conversion label:
In GTM > Tags > Select the Google Ads Purchase, Add to cart and Begin Checkout – Paste in each the Conversion ID e Conversion label :
Remarketing
In GTM > Tags > Select the Google Ads – Remarketing tag and add the conversion code generated in the ADS:
Enhanced Conversions
In Google Ads, go to the Tools > Conversions menu, select the Purchase conversion, and in the “Enhanced Conversions” section at the bottom and click Turn on enhanced conversions:
In GTM > Tags > Select the Google Ads – Purchase tag, enable the option Include user-provided data from your website and select the User-Provided Data variable:
Settings Facebook Pixel Code
↑ Back to topFacebook Pixel Events
In GTM > Variables > Select the Facebook Pixel Code variable and change it to your pixel code value:
Facebook catalog
In GTM > Variables > Select the Facebook Catalog id variable and change it to the value of the catalog you created on Facebook:
This plugin does not provide the feed of products to create the catalog, you must import the Facebook feed using another plugin and use our plugin only to communicate with the catalog.
Settings Pinterest Ads
↑ Back to topPinterest ID
In GTM > Variables > Select a Pinterest ID variable and change it to the value of your ID:
Email Pinterest
In GTM > Variables > Select the Pinterest Email variable and change it to the value of your Email:
This plugin does not provide the feed of products to create the catalog, you must import the Pinterest feed using another plugin and use our plugin only to communicate with the catalog.
Settings TikTok Ads
↑ Back to topPixel Code
In GTM > Variables > Select a TikTok Pixel Code variable and change it to the value of your ID:
Country Code
In GTM > Variables > Select a Country Code variable and change it to the value of your Country:
This plugin does not provide the feed of products to create the catalog, you must import the TikTok feed using another plugin and use our plugin only to communicate with the catalog.
Google Tag Manager Server Side
↑ Back to topIf you only use GA4 and want to start sending events through a server, follow the steps below:
1 – Create Container GTM Server
Create a New Container in GTM:
2 – GTM Web Client
a – Change the GA4 TAG by checking the option: Send to a server container and add the URL of the created server.
b – Add the Option Include user-provided data from your website (Server only) and select the variable User-Provided Server Side Data.
c – For Facebook Api, add the values of user_data as shown in the image:
3 – GTM Server Send data to GA4
For the GA4 to start receiving events from the server, create the tag for the GA4 on the GTM Server and add the Measurement ID and {{Event Name}}:
4 – GTM Server Send data to Facebook API
For the Facebook API to start receiving the data, create the Facebook tag on the GTM Server and add the Pixel ID and API Access Token:
5 – GTM Server Send data to TikTok API
For the TikTok API to start receiving the data, create the TikTok tag on the GTM Server and add the option Event Name Setup Method: Inherit from client, Access Token, TikTok Pixel ID and the User Data.
6 – GTM Server Client Container Web
Use this option when you want to deploy a Tag Manager web container to send data to your tagging server.
a – Create a new Client Google Tag Manager: Web Container and add your GTM Web Container id
b – In WooCommerce > Datalayer for WooCommerce > Custom Domain GTM Server Side and add your server domain
Notes
↑ Back to top- In google tag manager activate only the tags you are going to use, pause all other unused tags.
Debug
↑ Back to topTest Datalayer events on your site with the debug bar, by default, turned off.
In WooCommerce > Datalayer for WooCommerce > Activate Test Debugger Bar – Activate and click in RUN:
Debug bar working:
Consent Mode
↑ Back to topIf you want to use the GTM consent mode, it is important to know that Datalayer for WooCommerce works normally with this option, without any extra configuration in the plugin, what needs to be changed are the Google Tag Manager tags.
In GTM > Admin > Additional Settings > Enable consent overview:
Activate the Additional Consent Checks option on all Tags that you want to include consent:
In GTM > Tags > Clicking on the consent icon > See how all tags configured with consent will look like according to the options (ad_storage , analytics_storage):
After configuring the tags, you must choose how to trigger the Tracking Consent State:
1 – To configure it, you will probably want to use a Popup Consent plugin that already does this automatically, this plugin will already handle all the tracking code of the GTM, so it is important that in our plugin you leave the empty Google Tag Manager ID option, so the plugin will take care of the GTM code and whether or not to trigger consent and everything else will work automatically.
2 – If you want to use GTM for this, see below an example of how you can use it:
In GTM > Create a new auto-deny tag > Consent Default Denied:
In GTM > Create a new approval tag when user clicks a button > Consent Update Granted:
It is important to know that the trigger will depend on your website and the popup you have placed on it, this is just an example of how to use.
FAQ
↑ Back to top1 – Should I enable the DataLayer for WooCommerce Ecommerce Advanced and DataLayer for WooCommerce Ecommerce GA4 options together?
Definitely not. You should always choose ONLY ONE.
a – Use the option DataLayer for WooCommerce Ecommerce Advanced: for Analytics UA + GA4 together with the file GTM-UA-with-GA4-complement.json.
b – Use the option DataLayer for WooCommerce Ecommerce GA4: only for Analytics GA4 together with the GTM-GA4.json file.
2 – The purchase event is not being fired on the thank you page, what should I do?
This happens when you use a custom thank you page and don’t add the woocommerce_thankyou hook.
a – Check the woocommerce_thankyou hook in your template as shown:
https://woocommerce.github.io/code-reference/files/woocommerce-templates-checkout-thankyou.html#source-view.80
3 – What should I do when I activate the plugin and I get an error on the store page?
This happens when you use a visual page builder and you didn’t configure it correctly and then our plugin can’t understand that this page has products.
a – If you use Elementor Builder, review the settings using the links:
https://elementor.com/help/creating-a-woocommerce-archive-template
https://elementor.com/blog/customize-woocommerce-product-page
b – If you use DIVI Builder, review the settings using the link:
https://www.wppagebuilders.com/custom-woocommerce-shop-page-divi-builder
4 – Some transactions do not appear in Google Analytics?
It is possible that some transactions are not read by Analytics, see the main reasons:
a – Your payment gateway is external and after purchase it does not return the user to the thank you page.
b – The user is using an ad blocker or some extension that does not allow the GTM to run.