Using hidden fields in Google Tag Manager events

There will come a time, trust me, when you’ll need to capture the value of a hidden field to use in the label of an event. Here’s how. A pre-requisite though – the field will need to have an CSS Id to uniquely identify it.

First, define a Custom Variable that’s of the type DOM element. Make the selection method CSS Selector, and the Element Selector should be something like #hiddenField. Most importantly, set the Attribute Name to ‘value’ so that the variable will have the value of the field. [image: image.png]

Next, define your tag – type of course would be Event, with logical Category and Action names. Critically, the Label would be the name of the variable, e.g. {{DOM – hidden field}}.

Finally, trigger it on the page where the form fields are shown, and you’re sorted!

Tracking changes in form dropdowns using Google Tag Manager.

It’s inevitable that at some point you’ll be asked to report on form dropdown field values/changes in analytics. GTM does make the task doable. Here’s how.
1. Define a *Custom HTML tag* that’ll capture the event: Change the select# to your required dropdown ID. If you’re tracking multiple forms you might also want to change the event: name.
2. While you’re in this tag, define the trigger that’ll fire it. Pageview – Dom ready on all would work but you could also specify the page of the form in question.
3. Next define a Custom Trigger that’s a Custom Event with an event name matching the event in step one, e.g. selectionMade.
4. Let’s put the value of the dropdown field in a variable. Create a Datalayer variable eg ‘DLV – Dropdown value’ that has a name of ‘selectedElement.value’ – the value of the selected dropdown field.
5. Next, create the event tag that creates the event, eg Event – Form Dropdown. Populate the usual Category, Action fields; the Label will be the DLV you created above.
6. Finally, the above Event will need to be fired. The trigger will be a DOM ready Custom Event and the event name will be the event name defined in 1.
So in a nutshell we’re tracking the value of the field in a dropdown, and firing an event to create an event with a label of the value.

Why GTM Preview Mode might not work on your site

I was trying to run a Preview of Google Tag Manager for a site I was working on, but for some reason it simply wasn’t showing. Turning to the Console as always when something unexpected happens (or doesn’t happen), I saw an error message about my ‘Content Security Policy directive’ being violated.

Basically, a CSP is a directive that says what content is allowed on a site. For example, it might say that external scripts aren’t allowed. And in my case, it wasn’t allowing the debug mode of GTM to be delivered from the domain tagmanager.google.com/debug.

To get round this (if you don’t want to change your CSP) use a handy Chrome extension called Disable Content-Security Policy.

E is for Events

Events are user actions or behaviour on your site that you’ve defined as important to you. The only interaction that Analytics tracks by default is a page view, so if you want to track actions like form submissions, video views, downloads etc. you’ll need to implement Event Tracking.

Why? To know exactly what people are doing on your site. We’ve talked about Bounce Rate before, and how if you haven’t defined an event for that home page video play it might seem that engagement is poor when the opposite is true. You want to get to a point where people can’t sneeze on your site without you knowing what device/source/browser led to that sneeze. Event Tracking will help with that.

Event Tracking used to be a case of adding a bit of Javascript to the element you wanted to track, but there’s a far better way to do it: by using Google Tag Manager. While it’s a little work to set up initially, it’ll make your overall life with Analytics far better, and not just because it’s so easy to set up event tracking.

However you set up implement event tracking, you will need to give some thought to how you define your events. First, decide on a Category. For example, you have a number of videos on your site, so the overall event category will be ‘Videos’. Event categories are grouped together in analytics reports, so make the category consistent and you’ll be able to see and compare user interaction with all your videos.

The next required element of an event is the Action. This is literally the action taken – a click to play, stop or pause in the case of a video.

And the optional Label element of an Event just that – a name for the specific item, so ‘home page video’ or ‘annual report pdf’ would be Labels for the particular item you were tracking as an Event.

There are other elements to an Event (you might want to use Value if the event has a set value), but the important thing is that unless you use Event Tracking, you’re missing out on key insights into your site and how people interact with it.

Next: F is for Filters

To get these A-to-Zs in bite-size form, follow me @AnalyticsAtoZ on Twitter. Or sign-up to get notified when a new one is out or when my forthcoming ‘A-to-Z of Google Analytics’ book is published.

Solved: WordPress 5 editor fails to save

I like the new Gutenberg editor in WordPress 5, but the first time I used it, it simply wouldn’t save edits! I kept on getting ‘Updating failed’ message for the body of the edit (although editing SEO elements worked).

After some research, it turned out to be an issue with plugins like WordFence and WP Cerber, which block suspicious activity. To resolve without removing the plugin, go into the Hardening tab of WP Cerber and turn on the option ‘Allow access to the REST Api for logged in users’.