Design & Experience
Google Tag Manager How-To Series Part 2
So what is Google Tag Manager? Google Tag Manager is a tool that allows you to organize and maintain all of your tracking scripts in one place without having to edit the code of your website. In this video I’m going to show you how to setup event tracking for clicks on WooCommerce add-to-cart buttons.
This is the second video in our Google Tag Manager How-To Series.
Step 1: Create a Trigger
- In the left hand sidebar click Variables then Configure.
- In the right hand pane under Clicks make sure “Click Classes” is checked.
- In the left hand sidebar click Triggers then New and name the tag “Add to Cart”.
- Under “Tag Configuration” under Click select “All Elements”.
- Set the trigger to fire on Some clicks.
- Set the condition for the trigger to “Click Classes” contains “single_add_to_cart_button”. *Note the class “single_add_to_cart_button” is specific to WooCommerce. If your add to cart button has a different class then replace this with your own class.
- Click Save.
Step 2: Create the Event Tag
- Click Tag, then New and name the tag “GA Event – Add to Cart”.
- Under “Tag Configuration” select “Google Analytics – Universal Analytics.”
- For “Track Type” choose Event.
- Fill out the Category, Action, Label and Value fields according to how you best would like to view and filter your event tracking in Google Analytics.
- For this example for Category put “Event”.
- For Action put “Add to Cart”
- For Label choose the built in variable “Page URL”. This variable will return the current page url so that in Google Analytics you will be able to see which pages the Add to Cart buttons were clicked on.
- For Value put 1.
- Click “Google Analytics Settings” and create a new variable for your Google Analytics account UA number or select the variable that you created in part one of this series.
- For triggering select the “Add to Cart” trigger that we create in step 1.
- Click Save
Step 3: Launch
- So now that we’ve created the trigger and have the tag configured to launch these changes click “Submit” in the upper right.
- Add a descriptive version name so that you know what this change was for.
- Click Publish and it’s live.
So this was just a very basic quick tutorial of how to setup Google Analytics event tracking in Google Tag Manager. The biggest advantage of using Google Tag Manager is the organization. Once you have this setup you will be able to organize and manage your event tracking from the Tag Manager interface without having to make any changes to the code of your website.
In the next video I’ll go over how to setup AMP tracking in Google Tag Manager.
For your reference, here are the other blogs in this series:
Part One – Google Tag Manager How-To Series Part 1
Part Three – Google Tag Manager How-To Series Part 3
If you are having trouble setting up Google Tag Manger or need help with some of the more advanced features please contact us.
Get Help with Google Tag Manager