{"id":16268,"date":"2020-06-17T15:23:54","date_gmt":"2020-06-17T13:23:54","guid":{"rendered":"https:\/\/www.dase-analytics.com\/blog\/?p=16268\/"},"modified":"2020-06-17T15:23:54","modified_gmt":"2020-06-17T13:23:54","slug":"gtm-tip-02-format-value","status":"publish","type":"post","link":"https:\/\/www.dase-analytics.com\/blog\/en\/gtm-tip-02-format-value\/","title":{"rendered":"GTM Tip #02: Format Value"},"content":{"rendered":"

Sending all values to Google Analytics in a consistent format is very important. That\u2019s why the option to format the variable value is very valuable and safes a lot of time.<\/span><\/p>\n

If you wanted to change the format of a variable before, you were forced to define the formatting logic directly in the JavaScript variable. For example, this JS variable changes the value of the dataLayer variable <\/span>DL – eventAction<\/b> to lowercase.<\/span><\/p>\n

function(){
\nreturn {{DL - eventAction}}.toLowerCase();
\n}
\n<\/code><\/p>\n

Another example is this JS variable, which returns the string ‘not available’ if the dataLayer variable DL – eventAction is not defined (the variable is undefined or null). In other cases, it returns the original value in lowercase.<\/p>\n

function<\/span>(){<\/span>
\n<\/span>\u00a0 <\/span>if<\/span>({{DL - eventAction}} == <\/span>undefined<\/span> || {{DL - eventAction}} == <\/span>null<\/span>){<\/span>
\n<\/span>return<\/span> 'not available'<\/span>;<\/span>
\n<\/span>\u00a0 <\/span>else<\/span>{<\/span>
\n<\/span>\u00a0 <\/span>return<\/span> {{DL - eventAction}}.toLowerCase();<\/span>
\n<\/span> }<\/span>
\n<\/span>}<\/span><\/code><\/p>\n

 <\/p>\n

The big disadvantage of creating such JavaScript variables is that the entire GTM container will be full of JavaScript variables, which will make the GTM container really difficult to read. Each dataLayer variable (or really variable of any type), you have to “rewrite” as a JavaScript variable to only adjust its format to the desired format. Of course, formatting dataLayer variables is best solved directly during the implementation phase (so the values in dataLayer are already consistent), but it certainly doesn’t hurt to solve it directly in GTM. Formatting variables in GTM will also ensure that all variable values (even those that will be added in the future) will have the format, which will be consistent with previous values.<\/span><\/p>\n

What are the options?<\/b><\/h2>\n

You can find the option to format a variable at the bottom when defining a variable of any type. There are currently 5 different options to choose from:<\/span><\/p>\n

    \n
  • Change the case to lowercase or uppercase letters.<\/span><\/li>\n
  • Change the null value to another value.<\/span><\/li>\n
  • Change an undefined value to another value.<\/span><\/li>\n
  • Change the value from true to another value.<\/span><\/li>\n
  • Change false to another value.<\/span><\/li>\n<\/ul>\n

    For the options that change the value of a variable (from null, undefined, true, or false), you can type a static value (text) in the field or refer to another variable to which the value should be changed to.<\/span><\/p>\n

    \"\"<\/p>\n

    So, if you wanted to modify the JavaScript example from the beginning of this article and use formatting directly in the variable definition, it would look like this:<\/span><\/p>\n

    \"\"<\/p>\n

    Useful, right? No custom code or creation of any additional variables is required.<\/span><\/p>\n

    Ending<\/b><\/h2>\n

    Formatting variable values is a very effective way to change the format of variables, even without knowledge of JavaScript. However, the options you can currently choose from are still quite limited. I hope that in future, new, interesting ways will be added.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

    Sending all values to Google Analytics in a consistent format is very important. That\u2019s why the option to…<\/p>\n","protected":false},"author":62,"featured_media":16275,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[770,772],"tags":[],"_links":{"self":[{"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/posts\/16268"}],"collection":[{"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=16268"}],"version-history":[{"count":7,"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/posts\/16268\/revisions"}],"predecessor-version":[{"id":16276,"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/posts\/16268\/revisions\/16276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/media\/16275"}],"wp:attachment":[{"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=16268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=16268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=16268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}