Making a Custom JavaScript macro in Google Tag Manager is a very effective way to get some tricky little tasks done.
Sometimes you may need to parse something out of a longer string, and then put that sub-string into a Custom Dimension, or use as a macro in other Tags. The way to do this is to create a Custom JavaScript macro.
In the example below, I'll take you through the step by step process for creating a Custom Dimension to hold the domain or sub-domain name for any page. In this example, I'm extracting it from the "hostname url" via another macro.
Required: Universal Analytics, and GTM.
Sometimes you may need to parse something out of a longer string, and then put that sub-string into a Custom Dimension, or use as a macro in other Tags. The way to do this is to create a Custom JavaScript macro.
In the example below, I'll take you through the step by step process for creating a Custom Dimension to hold the domain or sub-domain name for any page. In this example, I'm extracting it from the "hostname url" via another macro.
Required: Universal Analytics, and GTM.
- Start by creating a Custom JavaScript Macro.
- From the NEW button, select "Macro".
- Macro Type: select "Custom JavaScript".
- A JavaScript function needs to be created to parse the element you're interested in.
- In this case, I'm referencing another macro called "{{url hostname}}", which as you've surmised, it holds the value of the hostname url for the current page being viewed on your website.
- Components of the JS:
- Fist, store the "url hostname" into a var called 'suddom'
- parse the var three times (easier to break into steps than nest)
- var subdom = hosturl.split('.');
- This uses the '.split' function to extract each piece of a string by using the '.' as a separator between words, and then stuffs each word into a separate index in the array you provided (in this case, 'subdom').
- e.g. If the url hostname was 'jello.coolfoods.com', then after the .split command ran, 'subdom' looks like:
- subdom[0] == "jello"
- subdom[1] == "coolfoods"
- subdom[2] == "com"
- Whew: all we're interested in is the first word, "jello". That's what we'll be returning at the end of the function
- In the case above, I'm doing an extra step because I'm removing the word "admin" from the subdom[0] element through some other code. You can skp this, or include it in case you have a bit of the subdomain / domain that you want to strip off. In that case, replace "admin" below with your unwanted string bits.
- var adminidx = subdom[0].indexOf("admin");
- The index number 'adminidx' is the position of the word admin within the first array element
- Now return only the first part of the 'subdom' as desired by the adminidx above.
- Return subdom[0].substring(0,adminidx);
- This returns only the first piece of the subdomain by using the substring feature to extract the string between each of the two array indices [0] and ['adminidx] value
- Cool. The function is done
- SAVE
- The url subDomain macro is dependent upon the url hostname macro that extracts the hostname from the DOM
- Create a macro of type "URL"
- Set component type to "Host Name"
- Check the check-box for "Strip WWW"
- SAVE
- Next, go into Admin in GA, and create a Custom Dimension in your web Property under. "Custom Definitions --> Custom Dimensions".
- In our example, it's named "{{url subDomain}}"
- Now that we have a Custom Javascript Macro called 'url subDomain', we need to use it to create a Custom Dimension in your Page View tag -- a firing rule must trigger this for ALL pages
- Save, Debug, and Publish!.
- Connect with me and let me know if you like this one
