Over the last couple of posts I\u2019ve mainly<\/a> been<\/a> doing<\/a> proof-of-concept (POC) tests with Google Tag Manager<\/a>. The great thing about a POC is that you don\u2019t really need to have any viable results or insight-driving technological innovations. The point is to showcase some feature of the platform on which the experiment was conducted.<\/p>\n In this post, I\u2019ll take a care-free step into the world of POCs again. My goal is to do a simple split test in order to identify which variant of a landing page (or key element thereof) produces the most conversions.<\/p>\n This isn\u2019t a replacement for any of the REAL A\/B testing tools<\/a> out there. Rather, this is a way for me to showcase yet another way to utilize the wonderful complexity of GTM\u2019s JavaScript wizardry.<\/p>\n Anyway, this is what you\u2019ll (hopefully) take with you after reading this post:<\/p>\n Combine these and you have a split test in the making!<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n This is how it\u2019s going to go down. Exactly 50% of people viewing the experiment page will see the following button:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n This is also the control variant. It\u2019s the one I\u2019ve used for years and years to make millions upon millions to my faithful followers (just kidding). However, I want to see if a more nonchalant approach to click baiting would work (and I want to appeal to the younger, less critical demographic), so this is the test variant shown to the other 50%:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n So I\u2019ll be measuring just how many clicks each of these buttons collect. In the end, I should see it in my reports both as events and as a Custom Dimension. Here\u2019s what a goal conversion report would look like for the two variations.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n It\u2019s not exactly hard science, but it got the job done. Surprisingly, the control variant was stronger, producing more conversions (who would\u2019ve guessed?!).<\/p>\n For this experiment, you\u2019ll need the following:<\/p>\n 1st Party Cookie Macro {{Split Variation Cookie}}<\/p>\n<\/li>\n Random Number Macro {{Random Number}}<\/p>\n<\/li>\n Custom HTML Tag<\/p>\n<\/li>\n Custom Dimension<\/p>\n<\/li>\n Universal Analytics Event Tag<\/p>\n<\/li>\n<\/ol>\n You\u2019ll need a 1st party cookie to make sure the same user sees the same variant every time s\/he visits the page. So when the variant is first assigned to the user, this cookie is also written. The cookie will return the value of the variant, which is important for the Event Tag and Custom Dimension as well.<\/p>\n Create a new 1st Party Cookie Macro<\/p>\n<\/li>\n Name it Split Variation Cookie<\/strong><\/p>\n<\/li>\n Set Cookie Name<\/em> to splitVar<\/strong><\/p>\n<\/li>\n<\/ol>\n So something like this:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n This macro will return the value of cookie splitVar<\/strong> which, as we will soon learn, stores the variant the user should see during the experiment.<\/p>\n I\u2019ll use the Random Number Macro to sample 50 % of my visitors. It\u2019s a nice trick, and I first saw it on Dan Russell\u2019s blog<\/a>.<\/p>\n Create a new Random Number Macro<\/p>\n<\/li>\n Name it Random Number<\/strong><\/p>\n<\/li>\n<\/ol>\n Here we go:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n So every time this macro is called, it returns a value between 0 and 2147483647. Can you see how useful this is for sampling? If I check if {{Random Number}}\n<\/p>\n This is where the magic happens. You\u2019ll need a Custom HTML Tag to perform a wide variety of things: modify the DOM element, identify the user\u2019s preferred variant, set and read a cookie, etc\u2026<\/p>\n Let\u2019s start with the code itself. This is what the tag should have. Remember to have it fire on all pages on which the experiment is run.<\/p>\n Let\u2019s go over this code.<\/p>\n Lines 2\u20136<\/strong> contain the code which modifies a pre-set DOM element. Thus this function operates the actual split test, showing a different variation of the landing page for 50 % of users. This function returns the name of variation 2.<\/p>\n Lines 8\u201312<\/strong> set up some variables for this script to work. Change call-to-action<\/strong> in getElementById(\u201ccall-to-action\u201d);<\/em> to match the ID attribute of the HTML element you want to dabble with on the page. Change string values for variationOne<\/strong> and variationTwo<\/strong> to match how you want to name or two variants. These values will be used in your GA reports. Finally, the variable randomNumSample<\/strong> contains a numerical value exactly 50 % of the maximum the Random Number Macro can return.<\/p>\n Lines 14\u201321<\/strong> first test if you\u2019ve already been assigned a variation by checking your cookies. If no cookie is found, you\u2019re a new user, and a variation must be assigned to you. In this case, the script randomly assigns you either the control variant (the default, \u201cclickDollars\u201d) or the test variation (\u201cclickWhatever\u201d). Next, it writes this information in a cookie which will stay with you for a long time.<\/p>\n Lines 22\u201324<\/strong> are executed if the cookie is<\/strong> found. In this case, if the variant that was assigned to you was the test variation, the DOM altering function from the beginning (see lines 2\u20136) is run again to make sure you always see the same variation of the landing page. If the variant that was assigned to you was the control variation, nothing happens, since that\u2019s the default version of the landing page.<\/p>\n Some things to note. First of all, the cookie is set for two years, so it mimics the _ga cookie. The point is that the user should always see the same variation (provided they\u2019re using the same browser). For some split tests this isn\u2019t necessary, so you can change the code to forgo the cookie check. Also, all the functions test for undefined values (both of the cookie and the control element), so I didn\u2019t see the need to add unnecessary try\u2026catch blocks or anything else.<\/p>\n Pro tip<\/strong> – Make use of the rarely utilized custom firing schedule for this tag to make sure your experiment only runs a certain time:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n You\u2019ll need to create a new user-scope Custom Dimension, so that you\u2019ll have one additional segment to play around with in your data.<\/p>\n Go to Google Analytics admin, and choose the property you\u2019ll be tracking these hits to<\/p>\n<\/li>\n Choose Custom Definitions > Custom Dimensions, and create a new user-scope CD<\/p>\n<\/li>\n Give it a descriptive name (I named mine just Test variation<\/strong>)<\/p>\n<\/li>\n Make note of dimension index<\/p>\n<\/li>\n<\/ol>\n So something like this:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n You could also use a session-scope or even a hit-scope dimension, depending on the scope of your test. However, even though I\u2019m not a professional CRO practitioner (far from it!), I see the benefit of observing interactions on a multi-visit, user<\/em>-level rather than the relatively tiny realm of a single visit or hit. However, some web design questions can probably be answered on a more limited scope, I guess.<\/p>\n The last bit you\u2019ll need is some event that\u2019s firing and sending your data to Google Analytics. Because I\u2019m observing a button (that I\u2019ve encased in an So anyway, I\u2019ve got a Link Click Listener firing on the test page. What I want to know is just what variant the user was seeing when they clicked the button. This is how I\u2019ll count my conversions and determine which variant was the winner. I\u2019ll also send the Custom Dimension with the event, so that the user is properly annotated with the variant name. I\u2019m sending the CD with the event simply because it\u2019s convenient for the scope of this article. You should definitely send it with the pageview, so that you can segment your visitors properly (e.g. out of people who saw the control variant, how many clicked the button; out of people who saw the test variant, how many clicked the button).<\/p>\n My Event Tag looks like this:<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nThe end result<\/h2>\n
![\"Click](\"https:\/\/www.simoahava.com\/images\/2014\/05\/click-here-dollars.jpg#ZgotmplZ\")
<\/p>\n![\"Click](\"https:\/\/www.simoahava.com\/images\/2014\/05\/click-here-whatever.jpg#ZgotmplZ\")
<\/p>\n![\"Split](\"https:\/\/www.simoahava.com\/images\/2014\/05\/report-ga.jpg#ZgotmplZ\")
<\/p>\nSetting up GTM<\/h2>\n
\n
1st Party Cookie Macro<\/h3>\n
\n
![\"Split](\"https:\/\/www.simoahava.com\/images\/2014\/05\/split-cookie.jpg#ZgotmplZ\")
<\/p>\nRandom Number Macro<\/h3>\n
\n
![\"Random](\"https:\/\/www.simoahava.com\/images\/2014\/05\/random-number.jpg#ZgotmplZ\")
<\/p>\nCustom HTML Tag<\/h3>\n
script>\n function<\/span> testVariant() {\n controlElement.style.backgroundColor=\"#000099\"<\/span>;\n controlElement.innerHTML=\"**Click here if you want, whatever**\"<\/span>;\n return<\/span> variantTwo;\n }\n \n var<\/span> controlElement = document<\/span>.getElementById(\"call-to-action\"<\/span>), \/\/ Set ID of control element\n<\/span> variantOne = \"clickDollars\"<\/span>, \/\/ Variation 1 name\n<\/span> variantTwo = \"clickWhatever\"<\/span>, \/\/ Variation 2 name\n<\/span> variant = variantOne, \n randomNumSample = 1073741824<\/span>;\n\n if<\/span>(!{{Split Variation Cookie}} && controlElement) { \/\/ If cookie isn't set run code\n<\/span> if<\/span>({{Random Number<\/span>}} \/\/ For 50 % of hits, fire Variation 2\n }\n var<\/span> d = new<\/span> Date<\/span>(); \/\/ Create cookie\n<\/span> d.setTime(d.getTime()+1000<\/span>*60<\/span>*60<\/span>*24<\/span>*730<\/span>);\n var<\/span> expires = \"expires=\"<\/span>+d.toGMTString();\n document<\/span>.cookie = \"splitVar=\"<\/span>+variant+\"; \"<\/span>+expires+\"; path=\/\"<\/span>;\n } else<\/span> if<\/span>({{Split Variation Cookie}} == variantTwo && controlElement) { \/\/ If user has only seen Variation 2\n<\/span> variant = testVariant();\n }\nscript<\/span>><\/code><\/pre>\n<\/div>\n![\"Custom](\"https:\/\/www.simoahava.com\/images\/2014\/05\/tag-firing-schedule.jpg#ZgotmplZ\")
<\/p>\nCustom Dimension<\/h3>\n
\n
![\"Custom](\"https:\/\/www.simoahava.com\/images\/2014\/05\/custom-dimension.jpg#ZgotmplZ\")
<\/p>\nUniversal Analytics Event Tag<\/h3>\n
<\/code> element), I\u2019m also using a Link Click Listener. If that says nothing to you, be sure to check out my guide on auto-event tracking<\/a>.<\/p>\n
![\"Event](\"https:\/\/www.simoahava.com\/images\/2014\/05\/event-tag.jpg#ZgotmplZ\")
<\/p>\n