Using UniPixel with Google Tag Manager (GTM)

Using UniPixel with Google Tag Manager (GTM)

If your website loads Google Analytics 4 (GA4) via Google Tag Manager (GTM) instead of directly via gtag.js, additional configuration is required for ecommerce events to work correctly.

This guide explains:

• The difference between gtag.js and GTM
• Why GTM requires manual event setup
• How to configure WooCommerce ecommerce events
• The recommended naming convention
• The required Data Layer Variables

---

Understanding gtag.js vs GTM

When UniPixel Includes gtag.js Directly

If UniPixel loads gtag.js directly on your site:

• UniPixel sends events using gtag(‘event’, …)
• Events go straight to GA4
• No GTM configuration is required

Everything is handled automatically.

When GA4 Is Loaded via GTM

If your site loads GA4 through Google Tag Manager:

• UniPixel pushes ecommerce data into the dataLayer
• GTM must listen for those events
• GTM must fire GA4 Event Tags

In this setup:

UniPixel sends the event
GTM forwards it to GA4

If GTM is not configured, events will not reach Google Analytics even though UniPixel is working correctly. This is how GTM is designed to operate.

---

Important: Disable Automatic Page View in GTM

When using UniPixel with GTM:

1. Open your GA4 Configuration Tag inside GTM
2. Set send_page_view to false

UniPixel already handles page_view tracking including consent logic and logging. Leaving automatic page view enabled inside GTM can cause duplicate page views.

---

Recommended Naming Convention

For clarity and maintainability, use this naming format inside GTM:

• Trigger: eCommerce – view_item
• Tag: eCommerce – view_item
• Trigger: eCommerce – add_to_cart
• Tag: eCommerce – add_to_cart
• Trigger: eCommerce – begin_checkout
• Tag: eCommerce – begin_checkout
• Trigger: eCommerce – purchase
• Tag: eCommerce – purchase

This keeps ecommerce tracking organized and easy to manage.

---

Step 1: Create Required Data Layer Variables

Before creating any ecommerce tags, you must create the required Data Layer Variables. Without these variables, GTM cannot pass ecommerce parameters to GA4.

Go to Variables → New → Data Layer Variable and create the following:

Variable Name	Data Layer Variable Name
DL – currency	currency
DL – value	value
DL – items	items
DL – transaction_id	transaction_id
DL – tax	tax
DL – shipping	shipping
DL – event_id	event_id

Each variable must match the Data Layer key exactly.

---

Step 2: Create view_item Event

Create Trigger

1. Go to Triggers → New
2. Name it: eCommerce – view_item
3. Trigger Type: Custom Event
4. Event name: view_item
5. Fire on: All Custom Events

Save.

Create Tag

1. Go to Tags → New
2. Name it: eCommerce – view_item
3. Tag Type: Google Analytics: GA4 Event
4. Select your existing GA4 Configuration Tag
5. Event Name: view_item

Add Event Parameters:

Parameter	Value
currency	{{DL – currency}}
value	{{DL – value}}
items	{{DL – items}}

Attach Trigger: eCommerce – view_item

Save.

---

Step 3: Create add_to_cart Event

Trigger

• Name: eCommerce – add_to_cart
• Type: Custom Event
• Event name: add_to_cart

Tag

• Name: eCommerce – add_to_cart
• Event Name: add_to_cart

Parameters:

Parameter	Value
currency	{{DL – currency}}
value	{{DL – value}}
items	{{DL – items}}

Attach Trigger: eCommerce – add_to_cart

---

Step 4: Create begin_checkout Event

Trigger

• Name: eCommerce – begin_checkout
• Event name: begin_checkout

Tag

• Name: eCommerce – begin_checkout
• Event Name: begin_checkout

Parameters:

Parameter	Value
currency	{{DL – currency}}
value	{{DL – value}}
items	{{DL – items}}

Attach Trigger: eCommerce – begin_checkout

---

Step 5: Create purchase Event

The purchase event is critical and must include transaction details.

Trigger

• Name: eCommerce – purchase
• Event name: purchase

Tag

• Name: eCommerce – purchase
• Event Name: purchase

Parameters:

Parameter	Value
transaction_id	{{DL – transaction_id}}
currency	{{DL – currency}}
value	{{DL – value}}
tax	{{DL – tax}}
shipping	{{DL – shipping}}
items	{{DL – items}}
event_id (optional)	{{DL – event_id}}

Attach Trigger: eCommerce – purchase

---

Testing Your Setup

1. Click Preview inside GTM
2. Trigger an ecommerce action on your site
3. Confirm:
   • The Custom Event appears
   • The correct Tag fires
4. Check GA4 → Realtime to confirm receipt

---

How Industry Platforms Handle This

Platforms like Shopify follow the same pattern:

• Ecommerce data is pushed to the dataLayer
• GTM must be configured to forward events
• GA4 receives events through GTM

This is not a limitation of UniPixel. It is standard GTM architecture.

---

Summary

If GA4 is loaded via GTM:

• UniPixel pushes ecommerce data to the dataLayer
• You must configure GTM triggers and GA4 Event Tags
• Required Data Layer Variables must be created
• Use the naming format eCommerce – event_name

Once configured correctly, WooCommerce ecommerce tracking works cleanly and reliably with GTM.