Design Your Sales Funnel Steps

  1. Home
  2. Docs
  3. Funnel Integrations
  4. Google Tag Manager Integration

Google Tag Manager Integration

In this guide, I will show you how you can integrate Google Tag Manager with WPFunnels to track your WPFunnels conversions.

Step 1: Create an account on Google Tag Manager

1. To integrate WPFunnels with Google Tag Manager, first, you will have to create an account on Google Tag Manager.

Go to Google Tag Manager.

Click on the Create Account button.

Google Tag Manager Create New Account Option

2. Here,

  1. Give a name to your new Account.
  2. Enter a container name
  3. Select target platform
  4. Click on the Create button
Google Tag Manager New Account

3. Once you click on the Google Tag Manager Terms of Service Agreement form will appear.

Click on the Accept button, and your account will be created.

Google Tag Manger Home

Step 2: Configure Data Layer Variables Implementation

After the Container is created, we’ve to implement dataLayer variables.

At first, click on the Configure button on the Built-In Variables.

Check the “Click Element” option under the Clicks section.

Now, you will have to configure the following user-defined variables:

Ecommerce
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce
Data Layer Version: Version 2

Ecommerce Affiliation
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.affiliation
Data Layer Version: Version 2

Ecommerce Coupon
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.coupon
Data Layer Version: Version 2

Ecommerce Currency
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.currency
Data Layer Version: Version 2

Ecommerce Items
Name: 
Variable Configuration
Variable Type: Custom JavaScript
Custom JavaScript:
function() {
  var ecom = {{Ecommerce}};
  if ( ecom && ecom.items ) {
    return ecom.items;
  } else {
    return undefined;
  }
}

Ecommerce Payment Type
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.payment_type
Data Layer Version: Version 2

Ecommerce Shipping
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.shipping
Data Layer Version: Version 2

Ecommerce Shipping Tier
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.shipping_tier
Data Layer Version: Version 2

Ecommerce Tax
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.tax
Data Layer Version: Version 2

Ecommerce Transaction ID
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.transaction_id
Data Layer Version: Version 2

Ecommerce Value
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce.value
Data Layer Version: Version 2

Here, I will show you how to configure the first variable, and you will have to follow the same process for the rest of the variables.

Here’s the first variable:

Ecommerce
Variable Configuration
Variable Type: Data Layer Variable
Data Layer Variable Name: ecommerce
Data Layer Version: Version 2

1. Click on the Variables option from the Dashboard menu on the left.

The variables section will be loaded.

Click on the New button from the User-Defined Variables section.

Googlel Tag Manager User Defined Variables

2. Once you click on the New button, the Variable Configuration section will slide in from the right side of the window.

Google Tag Manager Variable Configuration Drawer

3. At first, change the name to “Ecommerce”.

Google Tag Manager User Defined Variables

Now, click on the Variable Configuration Section and another drawer will slide in from the right side of the window.

Select “Data Layer Variable” from the drawer.

Once you select the option, another window will appear. Enter “ecommerce” as the Data Layer Variable Name.

Google Tag Manager User Defined Variables

Click on the Save button.

You will see that the “Ecommerce” variable is added in the list.

Google Tag Manager Variables Home

Now add the rest of the variables one by one, the same way you just added “ecommerce” variable.

This way you can configure rest of the data layer variables, except for the Ecommerce Items:

Ecommerce Items
Name: 
Variable Configuration
Variable Type: Custom JavaScript
Custom JavaScript:
function() {
  var ecom = {{Ecommerce}};
  if ( ecom && ecom.items ) {
    return ecom.items;
  } else {
    return undefined;
  }
}

For this, you need to select Custom Javascript instead of Data Layer Variable and the paste the custom javascript code from above.

Step 3: Triggers Configuration

Now, you need to configure the triggers.

1. Click on the Triggers option from the left side of the dashboard.

Click on the New button.

Google Tag Manager Triggers

The trigger configuration drawer will slide in from the right side of the window.

Click on the white background, and then the Trigger type drawer will slide in.

Here, set any name to your trigger and set the following Trigger: add_to_cart|begin_checkout|add_payment_info|add_shipping_info|purchase|orderbump_accept|upsell|downsell

Trigger Type: Custom Event

Event Name: 
add_to_cart|begin_checkout|add_payment_info|add_shipping_info|purchase|orderbump_accept|upsell|downsell

Check Use regex matching
This trigger fires on: All Custom Events

Click on the Save button, and your trigger configuration will be saved.

Step 4: Tag Configuration

1. Click on the Tag option from the left side of the dashboard.

Click on the New button.

Google Tag Manager Tags

We need to create and configure the following two tags:

  1. GA4 Configuration Tag
  2. Event Configuration Tag

Click on the New button to start configuring Tags.

At first, click on the Tag Configuration to Configure GA4 Tags

Now, here set the name to GA4 Configuration, set the Tag Type as Google Analytics GA4 Configuration, and enter your measurement ID in the Measurement ID field which you will get from Google Analytics.

Google Tag Manager GA4 Tag Configuration

Click on the Save button.

Now, click on the Triggering section below the tag configuration section.

Select All Pages and click on the Save button.

GA4 Tag Configuration
Please go to Tags from Workspace and Click New.
Tag Type
Google Analytics: GA4 Configuration
Measurement ID
Enter Measurement ID. You’ll get it from Google Analytics.
Check  Send a page view event when this configuration loads

Triggering
All Pages

2. Now, click on the New button from the Tags homepage again.

Select Google Analytics: “GA4 Event” as the Tag Type.

Select Google Analytics GA4 Configuration from the Configuration Tag

Set the Event Name as: {{Event}}

GA4 Event Configuration Tag
Please go to Tags from Workspace and Click New.
Tag type
Google Analytics: GA4 Event
Configuration Tag 
Select GA4 Configuration Tag
Event Name
{{Event}}

Event Parameters
(name - value)

Click on the Event Parameters accordion and click on the Add Row button, and set the following triggers:

items - {{Ecommerce Items}}
transaction_id - {{Ecommerce Transaction ID}}
affiliation - {{Ecommerce Affiliation}}
value - {{Ecommerce Value}}
tax - {{Ecommerce Tax}}
shipping - {{Ecommerce Shipping}}
currency - {{Ecommerce Currency}}
coupon - {{Ecommerce Coupon}}
shipping_tier - {{Ecommerce Shipping Tier}}
payment_type - {{Ecommerce Payment Type}}

Click on the Save button.

Now, Click on the Triggering section below and select Configure as the Triggering.

GA4 Event Configuration

That’s it, you have now configured Google Tag Manager.

Step 5: Connect Google Tag Manager with WPFunnels

1. Go to your WordPress Dashboard.

Hover your mouse on the WPFunnels option on the left side of the WordPress dashboard and click on the Settings option. You can also go to the WPFunnels dashboard and then click on the Settings option, and you will get the WPFunnels Settings window.

WPFunnels Settings

2. Click on the Google Tag Manager option to enable Google Tag Manager options.

WPFunnels Enable Google Tag Manager Option

3. Enter your GTM Container ID in the respective field.

**In your Google Tab Manager Workspace, near the top of the window, you will find your container ID, formatted as “GTM-XXXXXX“.

Google Tag Manager WPFunnels Integration

Click on the Save button and a confirmation pop-up will appear.

Click on the Submit button to submit your integration request to Google Tag Manager.

Now, you can track your WPFunnels data with Google Tag Manager.

Was this article helpful to you? Yes 1 No

How can we help?