I have created the following custom javascript variable in Google Tag Manager:
function() {
return {{Click Text}} || {{Click Element}};
}
which uses the built in variables Click Text and Click Element. I am using this variable as the label of a tag, which is triggered by any click.
This works perfectly well when the tags are triggered from localhost and the labels arrive correctly to Google Analytics (I'm using universal analytics). However, for my production website the label always shows up as (not set) in Google Analytics. What causes this discrepancy?
The reason this was not working for me was because I had a content security policy enabled on my production website, and for custom javascript variables to work with a CSP they need script-src: 'unsafe-eval' in the policy. This was also hard to debug because there is no error raised in the console about the CSP blocking the script.
To resolve this you can either add the above to the policy or alternatively use custom variable templates to run javascript in a way that doesn't require unsafe-eval. Unfortunately, this doesn't work for my example using {{Click Element}}, since it is not allowed in the template, but it works well for other situations where you might want to use a custom javascript variable.