Google Optimize - How to Track Button Clicks

by

Google Optimize is Google's A/B testing platform that lets you build variants of your site and run experiments to determine which version performs the best. Without additional configuration, you can choose among the following default experiment objectives: Bounces, Pageviews, Session Duration, and, if you have an e-commerce site, Transactions and Revenue.

This is a nice start, but insufficient if you're trying to optimize CTA (call to action) buttons for conversion. These CTA buttons may include important actions like Add to Cart, Contact, Download, etc., which are all common targets for A/B testing improvements. This blog post will describe step by step how to track and test button clicks through Google Optimize, to see if the modifications you make to your website make the user more likely to click a button.

Note: testing button clicks in Optimize requires that you first implement Google Analytics event tracking on the button. Implementation typically requires front-end development skills like working with JavaScript and CSS selectors. Step 5 has more details on that.

STEP 1: CREATE AN EXPERIMENT

From the main page, click Create an Experiment, and fill in the following options:

  • Name
  • Experiment URL
  • Experiment Type (A/B Test, Multivariate Test, Redirect Test)

For this example, I'll do a simple A/B test of a Contact button on my own site.

optimize-clicks-img1

STEP 2: ADD A VARIANT

From within the experiment details page, click Create Variant and give it a name. Once it's added, click Save.

optimize-clicks-img2

STEP 3: EDIT VARIANT IN THE EDITOR

Hover over the new variant and click the row to make changes in the editor. This will open up the visual editor, where you can select and edit elements. For this example, I'm changing the color of a Contact button from blue to red, using the editor palette.

optimize-clicks-img3

Following these changes, click Save and then Done in the top right to return to the Optimize experiment setup page.

STEP 4: CONFIGURE EXPERIMENT OBJECTIVES

The experiment objective identifies what your test is optimizing for. Under Configuration > Objectives > Experiment Objective, you'll see 2 options: 'Choose from List' and 'Create custom.'

optimize-clicks-img4

Choose from list will provide the previously-mentioned list of default options: Bounces, Pageviews, Session Duration, Transactions, Revenue, and any goals you've previously established in your GA account.

Since we want to track button clicks, you will instead select 'Create custom'.

STEP 5: CONFIGURE CUSTOM EVENT OBJECTIVE

After choosing 'Create custom', name your custom objective and click Events. This will open up a rules matching wizard where you can enter in the Event Category, Action, or Label that applies to your click action, as well as limit it to certain pages if you want. You will also need to choose your counting method (once or many times per session).

optimize-clicks-img5

Note that these events must be tracked in Google Analytics, and the event names for category, action, and/or label that you enter refer to the names by which they appear in Google Analytics. The example above uses "Event Action Equals Clicked Contact Button", so the tag in GTM must contain an Event Action of "Clicked Contact Button". This means that you must set up Google Analytics event tracking on the button before you can begin the experiment, and the event tracking must fire on both the original variation and any test variations.

Setting up GA event tracking in GTM is a very big topic in itself (this blog has a dozen posts on the topic) so this post won't go into it to deeply, but below is a summary of how to set up event tracking on the button.

  1. In GTM, navigate to Tags >  New > Google Analytics - Universal Analytics > Track Type = Event. Fill it in as follows:
    Event Category = Homepage
    Event Action = Clicked Contact Button
    Event Label = leave this empty
  2. Under Triggering, add a Trigger using the CSS selector of your button, e.g. Click Element matches CSS selector .button, .button *
    optimize-clicks-img8
    You'll need to substitute in your own CSS selector where it says .button, .button * Step 6 in this post has some info on how to identify your CSS selector, and/or you can try a tool like the Copy CSS Selector Plugin to do it automatically.
  3. Save, Preview, and Publish your container.

STEP 6: CONFIGURE TARGETING

Click the Targeting tab and choose the percentage of visitors to target, the weighting of visitors, and when to show the experiment. To avoid a "Page modified after initial load" error message, make sure that the 'URL matches' condition is set to the page you want to run the experiment on (you may see a different URL if you're copying/modifying an earlier test rather than starting from scratch).

optimize-clicks-img6

STEP 7: RUN THE TEST

Click Save and Start the Experiment.

Happy testing 🙂

[OPTIONAL] APPENDIX: ADD TRACKING FOR GOOGLE ANALYTICS

The above is all you need to track 2 different color variations against one another in Google Optimize. However, as implemented above, both variations will be tracked the same way in Google Analytics, like this:
Event Category = Homepage
Event Action = Clicked Contact Button

If you want the event to differentiate the button color in GA, you can add in the following:
Event Label = {{color}}, where {{color}} is 'Red' or 'Blue'

The steps to implement this are as follows:

  1. While editing the variant in the editor (Step 3 above), right-click the button and click Edit HTML. Slightly modify the button code to include the new color -- this will let you identify the color in Google Tag Manager.
    optimize-clicks-img7
    Original code:

    <a class="button simple" href="http://mixedanalytics.com/contact/" style="">Contact →</a>

    Edited code:

    <a class="red button simple" href="http://mixedanalytics.com/contact/" style="">Contact →</a>
  2. In GTM, navigate to Variables > User-Defined Variables > New > Custom JavaScript and enter a script that pulls out the information you need from the source code, which we added above to the button HTML. This script checks if the button has a class named 'red'. If so, it returns the value 'red'; otherwise it returns 'blue'.
    function() {
    var buttonClasses = document.querySelector(".button").classList;
    if (buttonClasses.value.search("red") > -1) {
        buttonColor = "Red";
    } else {
        buttonColor = 'Blue';
    }
    return buttonColor;
}

    Name the Variable 'JS - Button Color' and Save it.

  3. In GTM, navigate to Tags >  New > Google Analytics - Universal Analytics > Track Type = Event.  Replace the empty Event Label slot with {{JS - Button Color}}.
  4. Save, Preview, and Publish your workspace containing the new Variable and modified Tag. You should now see the button color reflected in your Event Label.

38 thoughts on “Google Optimize - How to Track Button Clicks”

      • The part of setting up GTM to correctly work with Optimize. Not exactly clear for those of us who are new to this. What name exactly is supposed to be used for "event names that you enter refer to the names by which they appear in Google Analytics" - would this be the Event Category? Action? or Label that we created in the Tag Configuration? Or none of these?

      • "event names" = event category, event action, and/or event label. If you've entered an Event Action of "Clicked Contact Button" in GTM's tag configuration, then you'd set Event Action Equals “Clicked Contact Button” in Optimize. The names need to match between the systems.

    • You can extract the information with a script. I added in some information on that, please take a look and let me know if it answers your question.

    • You again? It explains how to track button clicks, including the exact tag and trigger setup -- you just need to substitute in your own button's CSS selector. Do you have a specific question about it?

  4. Yeah the tutorial is nice, but I agree with "Anonymous" on the fact that this part is not clear (unless I am very dumb and didn't get it). At the end of Step 5, you've created a tag & trigger & variable in orde to track your specific button clicks and attributed a name to each of them. We can now start again at the beginning of Step 5 but where do you enter this tag/trigger/variable in optimize.google ? Do we have to replace "Clicked Contact Button" by the something we've created with GTM ? I hope I was clear in my questions. Thanks for the rest though

    • Hi Sebastien, in the example, I named Event Action in GTM as "Clicked Contact Button", so I selected Event Action Equals "Clicked Contact Button" in the Optimize Objective configuration page. (Step 4 shows how to access the Objective configuration: "Under Configuration > Objectives > Experiment Objective, you’ll see 2 options: ‘Choose from List’ and ‘Create custom.’...Since we want to track button clicks, you will instead select ‘Create custom’.")

      If you name your event something other than "Clicked Contact Button" in GTM, then you'd use that name instead in Optimize. Please let me know if that answers your question.

  5. Thanks for posting this, it was really helpful! Keep on the great work.
    For my case I had to compare the values on some inputs for an A/B test, just took me a few tweaks of your solution to achieve this.

    • haha, you're the first comment with positive feedback! 😀 Thank you, I'm glad it was useful.

  6. Hi Ana. I wanted to add my thanks here. The post wasn't initially about what I was looking for, but I decided to read through it anyways. I only run redirect tests and was looking to track phone clicks through Optimize so I could have all of my data easily displayed in one place. Step 5, in particular, showed me exactly what I needed to do, and it works beautifully. So thanks!

    • I know what that's like, digging through a post to find the relevant slice of information. Thank you for persevering, I appreciate the comment.

  7. Hi, Ana.
    I find your article useful and enough eloquent if there is a decent knowledge on GO and GTM. I liked the part with tracking the color version in GA.
    Thank you!

  8. Thanks for this, It's made my task to get this exact test working in Optimise so much simpler than gazing at the documentation for 30 hours XD

  9. Hi. Thank you for this article. I have made an event using GTM by following the instructions you gave. I am not sure why GO is still giving me this notification even without doing edits in the first place-- "Page modified after initial load..."

  10. Hi Ana, thanks for the detailed post, I was looking to add my custom event tracking to analytics and optimize and your blog post was perfect. Cheers

  11. The tutorial is great! Could you explain how one could create a tag for A/B-testing where the variants differ in filter-buttons. They are not proper buttons (not "btn" in the code).

    • Thanks for the kind feedback. The general process is the same regardless of the exact element you're testing, it just means you need to set up your event tag on the filter element rather than on a button click. And that works the same way, too: find the CSS element that represents clicks on the filter, or have your devs pass in a data layer event for that action, and then set up a tag based on that. Does that make sense?

  12. Hey this is great! i've tested it and its works like a charm.
    I even did the GTM stuff just with what you explain here.
    Thank you very much! This has been really helpful!

  14. Hi
    Thanks for this great post, really helpful. My classes are named slightly different, as I don't want to track the color, but the position, so I used "center" and "sidebar".
    However when Publishing in GTM, I get this error:
    Error on line 3, character 51: Parse error. ')' expected

    Here's the JS:
    function() {
    var buttonClasses = document.querySelector("._cta").classList;
    if (buttonClasses.value.search("_center") & gt; - 1) {
    buttonPosition = "center";
    } else {
    buttonPosition = 'sidebar';
    }
    return buttonPosition;
    }

    Could you help please?

    • sorry I use classes: "_cta" for both buttons, "_center" on the first and "_sidebar" on the second

      • Hi there, it looks like this was actually a content-display issue with the blog, where the ">" character got converted to "& gt;". I've just updated the post to convert that character back to its original value, can you please try again? I apologize for the confusion.

  16. Hi Dear Ana! Very helpful article, thank you very much.
    I followed it step by step but encountered one problem - when adding a custom objective, the 'Event Action equals SOME_NAME', my SOME_NAME is returning 'No matches', even though I created a proper tag in GTM. Do you have any idea what could be causing that? Any help greatly appreciated!

Comments are closed.