CODEWITHSUNDEEP
javascriptjquerygoogle-analyticsab-testinggoogle-experiments
hdzillar
hdzillar

Reputation: 77

AB Testing (GA) - Menu bar changes for multiple web pages

I am using Google Analytics for AB testing. I recently did a test for using multiple variations for one page without using redirects from this article and it worked well.

I want to use this same test for the menu of my website. It is just some CSS changes and I am planning on using JQuery to change the class of the menu depending on the variation the user gets.

My main concern is whether this is possible to achieve. If I include the GA code to my layout code, should i have a condition to see if the menu is available for that page to run the test? Do I need to add the URL's for the other pages that have the menu? or Do I do my test similar to how the one in the article was like?

If anyone has done a test like this, some advice would be appreciated.

Upvotes: 0

Views: 127

Answers (2)

tim_helck
tim_helck

Reputation: 43

Your questions:

  1. If I include the GA code to my layout code, should i have a condition to see if the menu is available for that page to run the test?

    • yes, you can wrap "var chosenVariation = cxApi.chooseVariation();" in a conditional that checks for the presence of the menu.

  2. Do I need to add the URL's for the other pages that have the menu?

    • I'm not sure what you mean by this. I don't know if there is any way to target GA by page URL. But you could use Google Tag Manager or something similar so that your code is only delivered to pages that have the menu.

  3. or Do I do my test similar to how the one in the article was like?

    • the only problem with implementing the test as shown in the article is that the style of the menu will change after the page is loaded and users will see a flicker. If you want to avoid this, you can load the page with the menu as a blank (same size, but no content) and then display it when you set the variation. But if you do this, make sure that you are checking return values so that if GA fails to load the test (for example if test expires) you will restore the control version of the menu.

Upvotes: 1

Jakub Kriz
Jakub Kriz

Reputation: 1529

1st - relevant audience

Make sure you have equal possibility to display menu for both tested groups (Menu is available for all visitors) - Original variant - Changed menu variant

2nd - custom dimensions

Create custom dimension in Google Analytics (session scope)

3rd - decision mechanism

Use Math.random() to reach 50% probability for each variant. Dave this information into cookie and since this time, use this variant for this particular user all time the test is running

4th - set ga tracker

ga("set","dimension2","Variant B");

5th - modify structure

Change your MENU structure/design/behavior

6th - track pageview

ga("send","pageview")

7th - set up event listeners

If you want to capture specific behavior, set event listeners for particular points of your website to track them. Is very useful, if you name this events like:

Category: A/B
Action: Menu Click
Label: Subcategory Best Articles

8th - Conversion Goals

In Google Analytics set up a conversion goal for your new EVENT (from step 8).

9th - Create Custom Report

Use your new event and custom dimension to see performance of your experiments.

PS: If you do it for first time, test your mechanism by A/A test. It mean there are technically two variants with 100% same content, but all mechanisms on background are working. After this, run the test.

Upvotes: 0

Related Questions