GTM quirk #17: beware the ‘!’

In CSS, using the ‘!’ in Class or Id names is not recommended. Technically it’s an invalid character, and certainly in Google Tag Manager your Triggers based on any CSS element that includes a ‘!’ in its name will not work. You’ll need to escape the ! (‘\!’) to get the trigger to fire.

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.