1. Documentation

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

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 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 Analytics UA
(Prepared with Google Analytics 4 tags as a complement to UA if you want)

DataLayer for WooCommerce Ecommerce GA4 -> Enable this option if you use Google Analytics 4 (GA4)

Usage ↑ Back to top

See how to use the plugin with:

Google Tag Manager ↑ Back to top

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

GA4 e Facebook API (Server Side)

Javascript ↑ Back to top

Extra Settings ↑ 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 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-and-ADS.json -> If you want to use Analytics UA, GA4 tags and variables as a complement and Google ADS

GTM-UA-with-GA4-ADS-and-Facebook.json ->If you want to use Analytics tags and variables UA, GA4 as a complement, Google ADS and Facebook Pixel Code

GTM-GA4.json -> If you want to use Analytics GA4 tags and variables, Google ADS (optional), Facebook Pixel Code (optional), Facebook API (optional).

After selecting the file, import the tags:

After import, it will look like this:

GTM-UA-with-GA4-and-ADS.json
GTM-UA-with-GA4-ADS-and-Facebook.json
GTM-GA4.json

Settings Universal Analytics ↑ Back to top

In 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 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 Tags menu and select the tag GA4 – Tag, enter the id of your GA4 and click on save:

Settings Google ADS ↑ Back to top

Remarketing

In GTM > Tags > Select the Google Ads – Remarketing tag and add the conversion code generated in the ADS:

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.

Google Tag Manager Server Side ↑ Back to top

If 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

Change the GA4 TAG by checking the option: Send to a server container and add the URL of the created server:

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:

Notes ↑ Back to top

  • In google tag manager activate only the tags you are going to use, pause all other unused tags.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment