Magento 2 & Google Tag Manager

Conversion tracking is easy to set up in Magento Commerce using the built-in Google Tag Manager implementation. Google Tag Manager (GTM) is also useful for other common goals like setting up A/B testing, or inserting some javascript into certain pages on your site. In addition, if you set up GTM support in Magento 2, you can turn on Enhanced Ecommerce reporting in Google Analytics, which will provide richer information for making business decisions.

This post provides support for my presentation given at MagentoLive Australia 2018, Easy Conversion Tracking with Magento Commerce.

---

My goal with this post isn’t to provide a complete explanation about everything to do with implementing conversion tracking in GTM. It is to provide a quick start guide for how to get initially set up with a basic configuration that will work for most Magento merchants. It’s very likely that your marketing needs will vary a bit from this default setup. But I want to provide a place to start, with a known working configuration that doesn’t require you to know everything up front. Once you have your basic setup done, you can make additional changes from there in order to accomplish your other digital marketing goals.

Outline

• Better Reporting with Magento 2’s Google Tag Manager Implementation
  • Google Tag Manager (GTM) Setup
  • Google Analytics Enhanced Ecommerce Reporting
• Ad Conversion Tracking Using Magento 2 & Google Tag Manager
  • Google AdWords
  • Bing Ads
  • Facebook Ads
• More Things You Can Do
  • Google Optimize for A/B Testing

What Is A Tag?

First off, you have to understand what a tag is, so a tag management system makes sense. A tag is a snippet of code that sends information to a third party. One of the most common tags is the snippet of javascript that is used by Google Analytics on every page of your website. It sends basic pageview statistics to Analytics and allows all of the rich reports that are available there.

How GTM Works: Tags & Triggers

Just remember this: Events Trigger Tags.

An event is just some condition that can occur on a website. A trigger is just a definition that can match that event, and a list of what tags to fire when that event occurs. A tag is just a snippet of code to do something on a third party site.

An easy example is that when a web pages is loaded by a user (Event), it will match a Pageview Trigger (Trigger), that sends logging information to Google Analytics (Tag). In this case, the trigger just says that when a page is loaded, fire the Analytics tag.

A slightly more complicated example, and what we’ll cover further, is when a user completes an order, we will match that with a Purchase Trigger, which will fire off several tags to log the conversion event on multiple advertising platforms.

Benefits of Google Tag Manager & Magento

There are a number of potential benefits to using GTM, such as:

• Centralized Tag Management
  • Keep lots of configuration in one system that’s easier to manage.
• Reduce Complexity When Using Similar Tags, Like Conversion Tracking
  • A single trigger can fire many related tags easily.
• Non-Developers Can Manage Tags
  • Digital marketers with strong tech skills can do this themselves without needing to call in developers.
• Version Control
  • You can export your GTM configuration in a text file that can be added to your git repository.

But there are also some very specific benefits to using GTM with Magento 2 for conversion tracking that may not be immediately obvious.

• Reduce Number of Installed Magento Extensions
  • If your site has an extension installed for AdWords, and another for Facebook tracking, you can simplify your configuration by removing them, and setting up converion tracking in GTM. This can be a huge financial savings over a multiyear period, as you will eliminate the labor cost involved in maintaining and upgrading and responding to security issues from each additional extension you can remove from your production site.
• Eliminate JavaScript Hacked Into Themes
  • Many merchants don’t know the best place to insert javascript tracking code, and it could be hacked into various theme files all over the place in a way that is not maintainable. With Magento’s GTM implementation, there is a better way.
• Reduced Costs Over Time
  • Developers are expensive. Reducing developer hours to maintain extensions and configure basic code to achieve marketing goals will add up to big savings over several years. Even if you still have a developer handle the GTM configuration (which is a good move since they will have a more complete understanding of the system), they will be able to move faster and still generate a savings.
• Magento Commerce GTM Includes Analytics “Enhanced Ecommerce”
  • This will greatly improve the granularity of reports in Google Analytics, and help you make better marketing decisions over time.

Support For GTM In Magento

Magento Commerce 2.2.x (including Cloud) supports GTM natively. There is no additional software installation required. It is easy to configure. It supports Google Analytics Enhanced Ecommerce Reporting natively. Note that Magento Commerce is the new branding for what was previous Magento Enterprise Edition (EE).

Magento Open Source 2.2.x does NOT support GTM natively. There are a variety of GTM extensions available. I have not used them all, but can say that the Anowave extension works well, with only a couple of minor differences from the configuration I’ll outline here. Note that some extensions do not support Google Analytics Enhanced Ecommerce Reporting. Or they may have a free GTM module that doens’t include it, and they use that feature as reason for you to upgrade to their paid version. Given the low price involved here, I think you’re crazy if you opt for a free GTM extension that doesn’t include Enhanced Ecommerce reports. Just buy it. It’ll pay for itself many times over as you make better marketing decisions.

Creating a Google Tag Manager Account

Creating a GTM account is easy. Go to Google Tag Manager and sign up.

1. You’ll be asked to name the account. Just put in your business name.
2. Next you’ll create a “container”. Think of this as a container for configuration for a particular website. Some businesses might have containers for multiple sites, or for using GTM with their mobile apps. I would just name the container the same as your Magento site’s domain name.
3. Specify that this is a “Web” container, since you’re running a website, not a mobile app.
4. Click “Create”.

Next, GTM will give you instructions for installing some javascript on your website. Do NOT do this. This has already been implemented in Magento Commerce, and will be enabled when you turn on the feature in Magento.

You’re now ready to go, and you’ll see the basic GTM interface:

Notice on the left-hand navigation, there are areas to configure Triggers, Tags, and Variables. We’ll be working with each of those. We’ve already discussed Triggers and Tags. Variables hold information that can be referenced in Tags and Triggers. For example, you can store your Google Analytics ID in a variable. Or we can store the Conversion Value of the current user’s purchase in a variable, while we’re processing it.

Setting Up Google Tag Manager for Magento 2

Our next step will be to import an initial default configuration of Triggers, Tags, and Variables into GTM that define how Magento will interface with GTM.

1. Go to the Admin panel in GTM.
2. Select ‘Import Container’ to load your settings from a file.

Before you head into the next step, you need to actually have the container settings file to load. It is available for download here: GTM_M2_CONFIG.json. Save that file to your computer.

The GTM M2 configuration definitions could change a bit in the future as Magento, GTM, and Google Analytics all shift and change. This configuration file should be available in the online documentation for your version of Magento Commerce. I am including the version for 2.2.x here, since there have been some recent changes and the official documentation did not include this file in recent months.

1. Upload the configuration file.
2. Select the “Default Workspace”.
3. It doesn’t matter if you overwrite or merge the configuration, as you have no previous configuration defined. It’s safe to just leave this on the default “Overwrite”.

After you upload the configuration, you’ll see a screen like this, telling you what has been set up:

Note that Tags have been imported for sending tracking of basic pageviews, and many more granular ecommerce events over to Google Analytics. Triggers with the same names have been set up, so it’s easy for you to go and look at them and see how they match website events, and what tags they fire. And a number of Variables have been defined, including one called “GoogleAnalytics” that is meant to hold your Analytics tracking number.

In order to set this GoogleAnalytics variable to your Analytics ID:

1. Click on “Variables” on your main GTM left-hand navigation.
2. Scroll to the bottom of the list of defined Variables, to the section for “User-Defined Variables” and click on “GoogleAnalytics”. When it opens up, notice that the type of variable is set to “Constant”. A Constant is a variable that always holds the same data, in this case, a tracking id that never changes.
3. Paste in your Analytics tracking id. If you’re not sure what it is, log in to your Google Analytics account and find it in the Admin section, at the Property level.

Publishing a Container

It’s time to introduce another key concept. When you make changes to GTM configuration, those changes are not live yet. GTM stages your changes until you “Publish” them by clicking on the “Submit” button in the upper-right of the GTM main screen. This feature can really save your butt as you’re working on a set of changes. You don’t have to worry about changes breaking the live site until you’re ready to push them out. And GTM also has some debugging features so you can test your changes on just your computer before you publish them for all website users.

But you’re good to go right now. So go ahead and publish your changes. Click on “Submit” and name this configuration something like “Initial Setup” (It doesn’t really matter–that’s just for you to remember what you did whenever you publish new changes).

When you “publish” changes, it doesn’t actually modify your website. It just tells GTM that when your website loads GTM, to use that configuration set. At this point, we haven’t actually told Magento to use GTM, so nothing will happen until we do that as well.

Also note your GTM id, at the top of the screen. It will start with “GTM-“. Copy this, as you’ll need it to set up Magento to use this container in the next section.

Configuring Magento To Use Your GTM Container

This next bit is very easy. Log in to your Magento backend admin area, and we’ll set it to use your new GTM container.

1. In the Magento administration area, go to “Stores” and then “Configuration”.
2. Select the “Sales” section, then “Google API”, and the “Google Analytics” section.

This is what you should see:

1. If it’s not already enabled, select “Yes” to enable Analytics.
2. Select that you’ll use “Google Tag Manager” for your Analytics tracking.
3. Paste in your Google Tag Manager container id.

On that same configuration screen, in the following section, “Google AdWords”, we need to ensure the AdWords tag is turned off in Magento:

We’re doing this because we’ll use the Analytics to AdWords integration for this tracking. It providers a richer set of features that are easier to implement, and avoid some problems with the AdWords tracking tag.

Once you’ve made these changes, save your configuration.

Since these changes will modify the output of your Magento pages to include the GTM javascript snippets, you should flush your configuration cache and your page cache in Magento to ensure the previous setup is no longer being served.

Set Up Google Analytics For Enhanced Ecommerce Reporting

Now we need to enable Enhanced Ecommerce Reporting in Google Analytics. To do so, log in to your Google Analytics account, and click on the administrative section at the bottom of the left hand navigation.

Go to the View level and click on “Ecommerce Settings”.

1. Just make sure you have basic ecommerce reporting and related products turned on. It probably already is.
2. Turn on Enhanced Ecommerce reporting.
3. Magento 2 has two checkout steps. Analytics will label them as “Step 1” and “Step 2” by default. But you can provide more descriptive names here. Since you select your shipping rate in Step 1, I usually label it “Shipping”. Since you select your payment method in Step 2, I usually label it “Payment”. If you have made customizations to your Magento site that change the checkout flow, you may need to make other choices here.

Now everything is in place to start the data collection that will give you much better ecommerce reports like this one:

Obviously you’ll need to wait to get some data before your reports flesh out, and they will only show data from this point forward. But check back in a day or two to confirm it’s working as expected and the reports are starting to populate.

AdWords Conversion Tracking Via Analytics Linking

Most ecommerce merchants we work with already have Analytics and AdWords linked for their conversion tracking. This method has several advantages over other methods like using the AdWords-specific tag. Remarketing audiences can be set up and reported on inside Analytics. Some data quality issues with conversion tracking can be avoided. It’s just plain easy. But let’s make sure you’re set up.

First off, go to the Administration section of Google Analytics, and at the Property level, select “AdWords Linking”.

If you already have it configured, it will look like this:

If you haven’t set up AdWords linking, you’ll be presented with a form to fill out:

1. Select the AdWords account to link to this Analytics property. Note that your logged in account must have administrative rights to both accounts in order to do this.
2. Turn on the Analytics View that you want linked to that AdWords property. If you have several views configured, your choice here will depend on why you created multiple views and how you want the data to flow back and forth. The basic rule of thumb is to use the view that you use to make your digital marketing decisions, which would also be the one that you configured for Enhanced Ecommerce reporting.

Now log in to AdWords so we can import the ecommerce transaction data from Analytics into AdWords as conversions.

At the time I’m writing this, there are two AdWords interfaces. The “New” AdWords interface does not have this feature yet, so you have to use the “Old” interface.

Go to the Tools menu, and then “Conversions”.

1. Select “Google Analytics” in the left-hand navigation.
2. Click the checkbox next to “Transactions”.
3. Import them.

Now we have conversion data flowing from Analytics into AdWords. In addition, because these accounts are linked, there are several additional reports in Analytics that show AdWords data. And there are additional columns in AdWords that show you data such as the bounce rate of people clicking through on ads, populated with data imported from Analytics.

Using The Data Layer For Bing Conversion Tracking

Bing tracking? Who advertises on Bing? It turns out, many Magento merchants make considerable income from their Bing ads. The BingAds platform isn’t the largest but, for the most part, they provide an AdWords-like interface that is easy to manage, and even if it’s only 20% the size of Google, that does mean you can boost your profits another 20% by taking advantage of this opportunity. Since there is no built-in way to track conversion value from Magento to Bing, this is an area where Google Tag Manager can really help us out.

First off, let’s create a Bing UET Tracking Id in the BingAds interface:

1. Clickon “UET tags” on the left-hand navigation inside of the BingAds system.
2. Click “Create UET tag”.
3. Give it a name (it doesn’t matter what you call it) and save it.

Now Bing will give you the ID of your new tracking tag. Make a note of that, as you will need it in your GTM configuration in a few minutes. It will also give you some instructions for installing the javascript tag on your website. Since we’ll be doing this through GTM, ignore these instructions.

Our next step is to define a new Conversion goal in Bing.

1. Click “Conversion goals” on the left hand navigation in BingAds.
2. Create conversion goal.
3. You can name the goal anything.
4. Here we’ll tell Bing that conversions occur when users make it to the /checkout/onepage/success page. Note that if you have customized the checkout process in a way that this URL differs on your Magento site, you may need to handle this differently.
5. Finally, specify that the conversion value can vary, since each purchase can be for a different amount.

To understand how we’re going to set the conversion value on these conversions, you need to understand another detail of how Magento sends data through GTM to Analytics Enhanced Ecommerce. Every time an ecommerce event defined by the Enhanced Ecommerce system occurs, Magento passes a data structure through GTM. This is called the “Data Layer” and contains all sorts of details that Analytics uses in creating the Enhanced Ecommerce reports.

Here’s an example of an actual Data Layer structure from an actual checkout on a Magento 2 store:

A few points of note… This is just a simple JSON data structure, and if you have any familiarity with them, you can easily figure out what the data means. When a purchase occurs, Magento sends over some basic information about the overall purchase, plus details of the products in the cart, plus a few extra fields such as the one at the bottom that defines that a “purchase” event has occurred.

Not every Magento extension sends precisely the same data. There is room for some variation in the standard. For example, when a purchase occurs, Magento commerce includes a “purchase event” in the Data Layer. Anowave’s extension, however, sends the purchase data, but does not include a “purchase event”. Because of minor variations like this, you may have to do some things slightly differently if you use a GTM extension other than the one built in to Magento Commerce.

By default this information is sent through GTM to Google Analytics. But we can intercept some or all of this data, and send it to another place as well, and that’s how we can get the purchase value over to BingAds.

The purchase value is the “revenue: 7” part of this data structure, and we can reference that using a GTM Variable. We just have to precisely describe where in the overall data structure we want to capture a value, and we can assign that value dynamically to a Variable. In this case, the full name of purchase revenue is “ecommerce.purchase.actionField.revenue” in the data structure. Note that this string is case sensitive, so the F in “actionField” need to remain uppercase.

Let’s go ahead and create a GTM Variable to store the revenue generated by each purchase. Start by logging in to GTM and clicking on “Variables” in the left hand navigation.

1. Scroll down to User-Defined Variables and click on “New”. Name your new variable “Checkout Revenue”. You can use it anything, but the rest of the examples here will assume you named it “Checkout Revenue”.
2. Next choose your variable type. The last type of Variable we used was a Constant. But this time we’ll select “Data Layer Variable”, which tells GTM that we want to pull data from the Data Layer dynamically.

3. Finally, put in the name of the data we wish to store in this Variable from the Data Layer object. In this case, it’s that string we went over previously: “ecommerce.purchase.actionField.revenue”.

Now that we can access the revenue, it’s time to define a BingAds Tag that we can use to send the conversion value. We’ll actually define two BingAds Tags. One will communicate basic page view information, and the other will send the conversion value when a conversion event occurs.

For both of these BingAds Tags, we’re going to go into GTM, click Tags on the left hand navigation, and then select “New”. Then select the Bing Ads Universal Event Tracking tag type.

The list of tag types is alphabetic. But pay attention… it’s alphabetic by company name. So the BingAds tag is under ‘M’ for ‘Microsoft’.

First create your “Bing Ads Pageview” tag:

1. Put your UET Tracking ID in.
2. Set this tag to trigger on “All Pages”.

Next, create your “Bing Ads Purchase” tag:

1. Set the tag type.
2. Put in your UET Tracking ID.
3. This event type needs to be set to “Variable Revenue”.
4. Set the goal value to “{{Checkout Revenue}}”. Note the double curly braces. This means that we want the value of this goal to be the contents of the Variable named “Checkout Revenue” rather than the literal text string “Checkout Revenue”. GTM will substitute the value of this variable for the current checkout each time this tag fires and pass that value through to Bing.
5. This tag should fire on the “m2 – purchase” trigger.

Note that this event was one that was pre-defined in the configuration file we loaded for Magento GTM configuration. Normally this trigger send a “m2 – purchase” tag to Google Analytics. What we’re doing here is saying that this Trigger should also fire the “Bing Ads Purchase” event. This is part of the power of using GTM to centralize configuration for similar tags. We can fire any number of tags from a single trigger based off of a single website event.

Facebook Ads Conversion Tracking

To set up Facebook Ads conversion tracking, we’ll do something similar to Bing, where we have a “Facebook Pageview” tag fire on all pages and a “Facebook Purchase” tag fire on purchase events.

One small change is that there is no predefined Facebook tag types in Google Tag Manager. Because of this, we’ll use a new type of tag, called a “Custom HTML” tag. A Custom HTML tag allows you to insert any arbitrary code into your page based on a trigger.

In this case, Facebook Ads provides a code snippet that they call the “Facebook Pixel”. To get started, log into your Facebook Ads account and retrieve this code snippet.

Once you have the Facebook Pixel, it’s easy. Create your “Facebook Pageview” tag in GTM:

1. Set the type to “Custom HTML”.
2. Paste the Facebook Pixel code in to the “HTML” field.
3. Set this tag to trigger on “All Pages”.

Now create your “Facebook Purchase” tag in GTM:

1. Set the type to “Custom HTML”.
2. Paste this code into the HTML field (but modify your currency code if you need to):<script> fbq('track', 'Purchase', {value: {{Checkout Revenue}},currency: 'USD'}); </script>
3. Set this tag to trigger on “m2 – purchase” like we did with the Bing Purchase tag.

Before you save the Facebook Purchase tag, we have one more step.

The code that this tag fires is a fbq() javascript function that Facebook defines in their Pixel code. This function communicates a conversion with a conversion value to Facebook’s ad platform. But this function isn’t available for use until AFTER the base Facebook Pixel code has already loaded. That means, the Facebook Purchase tag must fire AFTER the Facebook Pageview tag fires and loads the basic Facebook Pixel. Easy enough. GTM provides an elegant way to define what order tags must fire in when there are dependencies like this.

Simply scroll down a bit into the “Advanced Settings” area of the Facebook Purchase tag, and expand the “Tag Sequencing” section. From the dropdown, specify that the “Setup Tag” for this tag is “Facebook Pageview”. Now GTM will correctly fire the base Pixel code before attempting to record a conversion.

There is a lot more that can be done to more accurately record Facebook conversions. But this is all you need to record the same basic conversion information we have in AdWords and Bing, so we’ll keep it simple for now.

One Last Example: Google Optimize

Google Tag Manager isn’t just for conversion tracking. You can use it for all sorts of other situations on your Magento site when you need to run some javascript under certain conditions. Let’s run through one quick example with Google Optimize.

Google Optimize is a relatively new service for running A/B tests on websites. There is a free service level which allows you to run a small number of tests, and a paid version with more features and higher limits. If you’re currently paying for another system, but don’t run a lot of tests, you might want to consider Google Optimize as a cheaper alternative. If you aren’t performing any A/B tests, it’s a good way to learn how to do them at no cost.

I’m going to go over a very easy way to set up Google Optimize. This is sufficient for getting started on the system or just trying it out. If you really start to use this in production, you probably want to read through all the documentation and understand the issues with the various ways it can be set up, and put a bit more work into this. Don’t worry though, this setup is fine for the basics, and shows how easy it is to install basic services like this using GTM.

Start at the Google Optimize page and create a new account and a configuration container for your website, just like you did when setting up GTM. Optimize uses the same “container” metaphore for a set of configuration. Make a note of the Optimize Container ID, which you’ll use in the tag configuration. Then create an “Optimize” tag in GTM and configure it like this:

1. Set the tag type to “Google Optimize”.
2. Remember that you set your Google Analytics ID in a variable back at the beginning, so you can just reference the value of that variable with curly braces, “{{GoogleAnalytics}}”.
3. Set the “Optimize Container ID”.

Do NOT set this tag to fire on any trigger. Optimize has a particular requirement. It has to fire higher up on the page, before Google Analytics, in order to set up some things since some users will see one version of a page and others will see the variant. We can use tag sequencing to accomplish this.

Load up the “Universal Analytics” Tag configuration, and go to it’s Advanced Settings, and then Tag Sequencing:

Set it to fire the new Optimize tag before the Universal Analytics tag fires.

Simple as that. Tag sequencing is a powerful way to configure situations like this.

Remember to publish your GTM changes by clicking on “Submit”. If you’re making changes and nothing is happening, perhaps you forgot to publish a new version!

Tips and Troubleshooting

The “Preview” button next to “Submit” in GTM gives you a powerful debugging tool:

If you go into Preview Mode, you can then open up your website in another tab in Chrome. Preview mode will allow you to run your unpublished GTM configurations on only your web browser. Any other users will still get the previously published configuration. The window will be split so at the bottom you can view the tags that fire, and even inspect the Data Layer to see exactly what Magento is sending to GTM.

The next thing that’s very helpful is the various tag debuggers available as browser extensions for Chrome. You definitely want to install these. They will allow you to confirm that your tags are correctly being picked up by the various ad platforms.

Final Thoughts

We’ve covered a lot. Magento Commerce and Google Tag Manager. Google Analytics Enhanced Ecommerce Reporting. Conversion Tracking in AdWords, Bing, and Facebook. And how you can use GTM to set up other things like Google Optimize easily.

There is a lot more out there that you might want to do, like set up more complex Facebook Ad tracking, such as for lead forms. GTM makes it easy. Perhaps you realize that you have some Magento extensions installed that you actually don’t need. Maybe you should simplify your Magento installation to reduce complexity and save money over the next few years.

If you’re already on Magento Commerce, use what you’re already paying for. GTM is built in. If you’re using Magento Open Source, a GTM extension can be installed at a very low cost. You will get your money’s worth out of it.

I’d really encourage you to look deeper into what you can do with Google Analytics Enhanced Ecommerce reports. There are some additional features related to making segments that could make a number of reporting tasks easier, for example. Get familiar with the new report. Better data will lead to better business decisions.

Conversion tracking isn’t difficult. It’s pretty simple with Magento and Google Tag Manager. You don’t need to be a developer to do any of this.

I hope this has been a helpful overview of the basics of Magento and GTM and how to use it to accomplish a variety of business goals. At Psyberware, this is what we do. We work with Magento merchants on their ecommerce ad management. If you’d like to work with an agency that specializes in Magento merchants, with a team that’s experienced in the particular issues faced by Magento merchants, we hope you’ll reach out.