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
- Refunds
- Promotions
We follow the Google Tag Manager standard and the following events will be triggered:
add_payment_info, add_shipping_info, add_to_cart, begin_checkout, login, purchase, refund, remove_from_cart, search, select_item, select_promotion, view_cart, view_item, view_item_list, view_promotion
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 Settings
↑ Back to topGoogle Tag Manager ID -> Enter the GTM-XXXXXX ID to activate the Google Tag Manager code snippet
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
Custom script filename GTM Server Side -> Enter a custom name for the file gtm.js Only use for custom file loader in your GTM Server Side
Custom environment gtm_auth -> Insert gtm_auth to use a custom environment
Custom environment gtm_preview -> Insert gtm_preview to use a custom environment
Google Tag Manager Tags Sync
↑ Back to topDownload import File GTM -> Download gtm import file
Google Tag Manager Consent Mode
↑ Back to topGoogle Consent Mode -> Enable to trigger for all parameters consent to denied.
Ecommerce Settings
↑ Back to topDataLayer for WooCommerce Enhanced Ecommerce -> Enable this option if you use Google Analytics UA with Google Analytics 4 (GA4) tags as a complement to UA (deprecated)
DataLayer for WooCommerce Ecommerce GA4 -> Enable this option if you use only Google Analytics 4 (GA4)
Product Items -> Select if product items show ID or SKU
Product Brands -> Select the taxonomy containing Product Brands
Event add_shipping_info -> Select when the event should be triggered. (Shipping selected/Place order button)
Event add_payment_info -> Select when the event should be triggered. (Payment selected/Place order button)
Variable product event view_item -> Select when the view_item event should fire if its a product variable (Parent product page view/When selecting a variation/Parent product page view and When selecting a variation)
Variable product as individual product -> Enable to show variable product variants as an individual product
Show view_item_list related product -> Enable to show event view_item_list for related product in page product
Ecommerce Advanced
↑ Back to topTrigger Purchase only once -> When a user refreshes the thank you page, the purchase event is not sent again. Prevent duplicate transactions in analytics
Show user info -> Select if user information show or not when logged
Events with Javascript -> Enable this option via javascript as an alternative when your theme fails to load the hook add_to_cart with php.
Ecommerce Promotions
↑ Back to topCreate the promotions that will be used to trigger the select_promotion and view_promotion events
Extra Debug Bar
↑ Back to topActivate Test Debugger Bar -> Enable this option to test Datalayer events on your site with the debug bar, by default, turned off
Usage
↑ Back to topSee how to use the plugin with Google Tag Manager, you will see in the debug the DataLayer already mapped.
Ecommerce (GA4)
Facebook Pixel Code and Pinterest Ads
TikTok Pixel
GA4 and Facebook API (Server Side)
Settings Client Side
↑ 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 > Google Tag Manager > Tags Sync > 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). (deprecated)
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 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 Variables menu and select the variable GA4 – Measurement ID, enter the id of your GA4 and click on save:
Settings Google ADS
↑ Back to topConversions
In Google ADS > Goals > Summary – 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 :
Enhanced Conversions
If you want to enable Google 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:
New Customer Acquisition
If you want to enable Google Ads New Customer Acquisition:
In GTM > Tags > Select the Google Ads – Purchase tag, enable the option Provide new customer data and select data source Data Layer:
Conversions with Cart Data
If you want to enable conversions with cart data:
In GTM > Tags > Select the Google Ads – Purchase tag, enable the option Provide product-level sales data and insert information based on the image below:
Remarketing
In GTM > Tags > Select the Google Ads – Remarketing tag and add the conversion code generated in the ADS:
Remarketing Dynamic
If you want to enable Google Ads Dynamic Remarketing:
In GTM > Tags > Select the Google Ads – Remarketing Dynamic tag and add the conversion code generated in the ADS:
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.
Notes
↑ Back to top- In google tag manager activate only the tags you are going to use, pause all other unused tags.
Settings Server Side
↑ Back to topGoogle Tag Manager Server Side
↑ Back to topIf you 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 – On the GA4 TAG, add the parameter server_container_url and add the URL of the created server.
b – Add the Parameteres user_data and User Properties user_data as shown in the image:
user_data.email_address | {{User}}.em |
user_data.phone_number | {{User}}.ph |
user_data.first_name | {{User}}.fn |
user_data.last_name | {{User}}.ln |
user_data.city | {{User}}.ct |
user_data.region | {{User}}.st |
user_data.postal_code | {{User}}.zip |
user_data.county | {{User}}.country |
user_data | {{User-Provided Data}} |
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}}:
Server Send Google Ads
↑ Back to topConversions
If you want to use Google Ads conversions Server Side:
In Google ADS > Goals > Summary – Create three conversions for e-commerce: Purchase, Add to cart and Begin Checkout:
In Conversion, copy the Conversion ID and Conversion label:
In GTM Server > Tags > Create the Google Ads Purchase, Add to cart and Begin Checkout and Paste in each the Conversion ID e Conversion label :
Purchase
Add to cart
Begin Checkout
Remarketing
If you want to use Google Ads remarketing Server Side:
In GTM Server > Tags > Crete the Google Ads – Remarketing tag and add the conversion code generated in the ADS:
Remarketing Dynamic
In GTM Server > Tags > Create the Google Ads – Remarketing Dynamic tag and add the conversion code generated in the ADS:
After testing Google Ads events on GTM Server, disable all Google Ads tags from your GTM Web.
Server Send Facebook API
↑ Back to topFor 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:
Server Send TikTok API
↑ Back to topFor 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.
GTM Server Client Container Web
↑ Back to topUse 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 > Google Tag Manager > Settings > Custom Domain GTM Server Side and add your server domain
Issue a refund event
↑ Back to topTo send a refund event follow steps bellow:
1. In WooCommerce > Orders, select the order and create the manual refund.
2. In the order, where the refund was registered, to issue the Refund event, click on Send refund to Datalayer
3. The link will open the homepage of the site and the event will be triggered
Debug
↑ Back to topTest Datalayer events on your site with the debug bar, by default, turned off.
In WooCommerce > Datalayer for WooCommerce > Extra > Activate Test Debugger Bar – Activate and reload your store:
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 WooCommerce > Datalayer for WooCommerce > Google Tag Manager > Consent Mode > 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.
Developer Resources
↑ Back to topIf you want to customize Datalayer for WooCommerce using hooks go to Developer Resources documentation.
Video Tutorials
↑ Back to topIf you want to see tutorials on how to configure the tools: Google Tag Manager, Google Analytics, Facebook, Pinterest and TikTok using the Datalayer plugin for WooCommerce, go to the Video Tutorials documentation
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.
5 – Can I use the GTM code snippet from another plugin or directly in the theme?
Yes, you can leave the Google Tag Manager ID field empty.