WPFusion connects with 19 CRMs and 46 plugins but occasionally you’ll want to do something there isn’t (yet) an integration for.

This is where the javascript API becomes incredibly useful. By using a simple javascript snippet you can apply tags, update custom fields and send custom event data anywhere on your website.

For an additional layer of power Google Tag Manager makes triggering and managing these snippets a breeze (even if you are not a developer).

Google Tag Manager, or GTM for short, is made up of three core features:

  1. Tags – short code snippets (not to be confused with CRM tags)
  2. Triggers – the ability to execute tags when certain events happen
  3. Variables – the ability to store information that can be used in tags and trigger

GTM works best with a ‘Data Layer’. In the context of WordPress this is a list of all the useful data you may want to pass to GTM, such as user role, name, email, page title etc.

In this article, we are going to use the WPFusion Javascript API and GTM to apply a tag when a logged in user adds a product to their WooCommerce cart.

This could be used to give the customer a product based discount if they added to cart but didn’t checkout, for example.

The tags are created dynamically and do not need to be setup in advanced (except for CRMs that use IDs for tags, such as Infusionsoft).

To achieve this we will grab the name of the product from the Data Layer, store it in a Variable and then use that Variable in our GTM tag.

Let’s get started…

Step 1 – Setup and Configure Google Tag Manager

 

When you first sign in to Google Tag Manager you will need to create an ‘Account’. This is the highest level of management in GTM.

The name of your account is usually the name of your company.

Within each account are ‘containers’. This is where your tags, triggers and variables are found. Each container represents one website.

Now that we have our container setup we are ready to install GTM on our website.

For this we are going to use a handy plugin called DuracellTomi’s Google Tag Manager for WordPress by Thomas Geiger.

After you have installed and activated the plugin navigate to Settings -> Google Tag Manager.

You will need your Google Tag Manager ID, this can be found inside your container:

Set the ‘Container code placement’ to ‘Custom’:

Follow the on-screen instructions and place the php snippet in your child theme.

Besides adding the GTM tracking script to our website, the plugin also creates a WooCommerce Data Layer.

To turn this on navigate to the ‘Integration’ tab and select ‘WooCommerce’. There are various options here but I recommend turning on the following:

Step 2 – Create a GTM Variable

The next step is the grab the name of a WooCommerce product from the Data Layer and store it as a variable in Google Tag Manager.

Navigate to a WooCommerce product page, right click and choose ‘Inspect’ then go to Console’, type ‘dataLayer’ and hit enter :

Toggle once to reveal:

Then toggle further, 0 > ecommerce > detail > products > 0 :

Now that we have found the name of our WooCommerce product we can use this to create a variable in GTM.

To extract information from the Data Layer we have to build a key. To do this we start at the highest level of the tree and work our way down:

ecommerce.detail.products.0.name

Now, go to GTM, click on ‘Variables’ and under ‘User-Defined Variables’ click on ‘New’:

Let’s call it DLV – Product Name . DLV stands for ‘Data Layer Variable’.

Click inside the box to configure and choose ‘Data Layer Variable’ from the menu:

The ‘Data Layer Variable Name’ is the key we found earlier:

Then click ‘Save’ to complete the variable set up.

Before proceeding to the next step let’s turn on the built-in ‘Click’ variables in Google Tag Manager.

Under ‘Built-In Variables’ click on ‘Configure’

Scroll down and select all of the checkboxes under the ‘Clicks’ section:

We can now use these variables in our trigger…

Step 3 – Create a Trigger

 

We only want our Javascript snippet to fire when someone clicks on the ‘Add to Cart’ button. To do this, we need to create a ‘Trigger’.

Refresh the preview in GTM and navigate to any WooCommerce product page.

Then click on the ‘Add to Cart’ button but hold down the CTRL button on your keyboard so the link opens in a new tab.

Close the extra tab and stay on the original page.

Next, select the ‘gtm.click’ event from the left hand sidebar then navigate to the ‘Variables’ tab.

We need to pick something specific about this button to use as our trigger.

Let’s use the ‘Click Text’ variable which is ‘Add to Cart’.

Now we can go back to Google Tag Manager and navigate to the ‘Triggers’ section.

Create a new Trigger and call it ‘CT – Add to Cart’. CT stands for ‘Click Text’.

For the trigger type we will use Click -> All Elements.

This trigger will fire on ‘Some Clicks’, when the ‘Click Text’ contains ‘Add to Cart’.

Save the trigger and then we are ready for the final step.

Step 4 – Create a GTM Tag

 

Click on ‘Tags’ -> New

Call it ‘WPF- ‘Add To Cart’’

For the ‘Tag Configuration’ choose ‘Custom HTML’

And paste in the following script:

The name of the GTM tag is generated via the ‘DLV – Product Name’ variable we created earlier.

So, for example, if our product was called ‘Basic Membership’ the CRM tag would be ‘Add to Cart Basic Membership’.

Next, we need to add our trigger to the tag:

Select the ‘CT – Add to Cart’ trigger we created earlier.

And finally, click on Save

Step 5 – Testing

 

Refresh the preview and reload the WooCommerce product page.

Then click on the ‘Add to Cart’ button but hold down the CTRL button on your keyboard so the link opens in a new tab.

Close the extra tab and stay on the original page.

In the Google Tag Manager preview console you should see that the ‘WPF – Add to Cart Tags’ has fired.

If you click on the tag you should see that the name of the product has been added to the CRM tag name.

Conclusion

 

In this tutorial we used Google Tag Manager, along with the WPFusion Javascript API to apply a tag when a customer clicks on the ‘Add to Cart’ button.

The name of the tag was determined by the name of the WooCommerce product that is added to the cart.

To achieve this, we pulled the product name from the dataLayer of WooCommerce and used this as a variable in our GTM tag.

Google Tag Manager helps you get to those hard to reach places and, combined with WPFusion opens up endless possibilities.

In the next part of this series we will use Google Tag Manager and the WPFusion API to send custom field data to your CRM or Marketing Automation tool.

Luke Stacey leads the Marketing Automation team at WPLaunchify.com and publishes regular tutorials at WPAutomationLab.com Get in touch via help@wplaunchify.com or connect on LinkedIn.

Share This