Datalayer for WooCommerce

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 top

With 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

We follow the Google Tag Manager standard.

Installation

↑ Back to top

See the steps to install the plugin:

1. Download the extension from your WooCommerce dashboard.
2. Go to Plugins > Add New > Upload and select the ZIP file you just downloaded.
3. Click Install Now and then Activate.

Activation

↑ Back to top

Go to menu WooCommerce > Datalayer for WooCommerce:

Google Tag Manager Settings

↑ Back to top

Google 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

Google Tag Manager Tags Sync

↑ Back to top

Download import File GTM -> Download gtm import file

Ecommerce Settings

↑ Back to top

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 (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

Ecommerce Advanced

↑ Back to top

Trigger 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.

Extra Debug Bar

↑ Back to top

Activate Test Debugger Bar -> Enable this option to test Datalayer events on your site with the debug bar, by default, turned off

Usage

↑ Back to top

See 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 top

If you use Google Tag Manager, we will help you configure all available options mapped with our Datalayer.

Import Google Tag Manager

↑ Back to top

Download 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 top

If 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 top

Conversions

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:

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:

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 top

Facebook 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 top

Pinterest 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 top

Pixel 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 top

Google Tag Manager Server Side

↑ Back to top

If 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 – 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}}:

Server Send Facebook API

↑ Back to top

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:

Server Send TikTok API

↑ Back to top

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.

GTM Server Client Container Web

↑ Back to top

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 > Google Tag Manager > Settings > Custom Domain GTM Server Side and add your server domain

Issue a refund event

↑ Back to top

To 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 top

Test 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 top

If 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.

Developer Resources

↑ Back to top

If you want to customize Datalayer for WooCommerce using hooks go to Developer Resources documentation.

Video Tutorials

↑ Back to top

If 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 top

1 – 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.