Rich-text Reply

Combining JS Directives in a Variation's "Edit Code"

andriym 07-12-15

Combining JS Directives in a Variation's "Edit Code"

[ Edited ]

In a page redirect experiment, I have a working snippet of custom code in my Variation #1 "edit code" area than makes sure redirection happens as I intended it (as per this).

 

I'm trying to add another short piece of custom code to Variation #1 to track it as an event in Analytics. This extra code worked well on its own in "edit code" in a prior experiment, and works fine on its own in "edit code" of my Original page - which doesn't have the other custom code needed for redirection.

 

The event tracking addition in Variation #1 doesn't work, but works in Original. Maybe there's something I got wrong about the syntax when trying to combine the two?

 

Here is my new combined code with the newly added line at the end:

 

/* _optimizely_redirect=http://custom */
$("head").append("<style>body{display:none;}</style>");
var url = window.location;
var redirect_url = 'http://' + url.hostname + url.pathname + '2' + url.search;
window.location = redirect_url;

window.ga('send', 'event', 'Optimizely', 'exp-3190330509', 'Variation1', {'nonInteraction': 1});

 

 

Level 3

Re: Combining JS Directives in a Variation's "Edit Code"

Hi Andriym,

Any variation code that is written after window.location = redirect_url will not execute.

Can you add the window.ga code above this code and test if it triggers in Google Analytics?

Best,


Amy Herbertson
Customer Success
Highlighted
andriym 07-13-15
 

Re: Combining JS Directives in a Variation's "Edit Code"

Thanks, @Amy_Herbertson !

 

Should it be like this?

 

window.ga('send', 'event', 'Optimizely', 'exp-3190330509', 'Variation1', {'nonInteraction': 1});

/* _optimizely_redirect=http://custom */
$("head").append("<style>body{display:none;}</style>");
var url = window.location;
var redirect_url = 'http://' + url.hostname + url.pathname + '2' + url.search;
window.location = redirect_url;

or like this?

 

/* _optimizely_redirect=http://custom */
window.ga('send', 'event', 'Optimizely', 'exp-3190330509', 'Variation1', {'nonInteraction': 1});
$("head").append("<style>body{display:none;}</style>");
var url = window.location;
var redirect_url = 'http://' + url.hostname + url.pathname + '2' + url.search;
window.location = redirect_url;

or do you think it doesn't matter much?

Level 3

Re: Combining JS Directives in a Variation's "Edit Code"

It should work as long as it's above window.location=redirect_url

Please test it out and let us know!

Amy Herbertson
Customer Success
andriym 07-14-15
 

Re: Combining JS Directives in a Variation's "Edit Code"

My 2nd code snippet above doesn't work -

 

/* _optimizely_redirect=http://custom */
window.ga('send', 'event', 'Optimizely', 'exp-3190330509', 'Variation1', {'nonInteraction': 1});
$("head").append("<style>body{display:none;}</style>");
var url = window.location;
var redirect_url = 'http://' + url.hostname + url.pathname + '2' + url.search;
window.location = redirect_url;

 

It breaks the redirect, it just won't ever happen no matter how many different browsers I try (clearing cookies etc). When I debug with GA Debug in Chrome, i can see some sessions that probably would have redirected had the code not broken - i.e. i see a GA custom dimension tracker that declares as Variation #1 but the browser stays on the Original url. I'll try the other idea now and report back, this code:

 

window.ga('send', 'event', 'Optimizely', 'exp-3190330509', 'Variation1', {'nonInteraction': 1});

/* _optimizely_redirect=http://custom */
$("head").append("<style>body{display:none;}</style>");
var url = window.location;
var redirect_url = 'http://' + url.hostname + url.pathname + '2' + url.search;
window.location = redirect_url;

  

Level 3
andriym 07-14-15
 

Re: Combining JS Directives in a Variation's "Edit Code"

[ Edited ]

Nope, @Amy_Herbertson, that didn't work either, same symptoms regardless of whether I put this piece 

 

window.ga('send', 'event', 'Optimizely', 'exp-3190330509', 'Variation1', {'nonInteraction': 1});

 

before 

/* _optimizely_redirect=http://custom */

or after it ...

 

So for now, I've removed that window.ga line from both my variations and redirects are again working correctly, but I don't get my ga events pushed anymore and can't differentiate between the variations in Analytics. Any advice?

Level 3
JDahlinANF 07-14-15
 

Re: Combining JS Directives in a Variation's "Edit Code"

Is "window.ga" defined when the Optimizely code runs?   You may be encountering an error in your code execution.  On a test version of your experiment, try it like this to see what is happening:

/* _optimizely_redirect=http://custom */
try {
  window.ga('send', 'event', 'Optimizely', 'exp-3190330509', 'Variation1', {'nonInteraction': 1});
  $("head").append("<style>body{display:none;}</style>");
  var url = window.location;
  var redirect_url = 'http://' + url.hostname + url.pathname + '2' + url.search;
  window.location = redirect_url;
} catch(e) {
  console.log("opt error" + e);
}

 

 

Separately, however, if your page has to wait for GA to load, you will be introducing addtional flicker/flashing to your users (more of the original page will load before the redirect happens).  Instead, perhaps one of the following will suit your needs:

1- add a URL parameter specific to this redirect that you can use to trigger the GA event on the landing page.

2- if you need to keep your URLs clean, perhaps you can access browser storage to flag the redirect before it happens and then use that flag to trigger the GA event on the landing page (and clear the flag, so that the event only happens when the user goes through the redirect).

 

Just throwing out a random thoght here... Another possibility is that because you are accessing "window" directly, and not using jQuery functions, the entire flow is automatically delayed until DOM ready and perhaps the "optimizely redirect" code doesn't work when it runs that late... try removing the "optimizely_redirect" line so it just runs as regular javascript code (which will have flicker/flashing, but maybe it works).

andriym 07-14-15
 

Re: Combining JS Directives in a Variation's "Edit Code"

Thanks @nap0leon, that's really useful advice. I tried your sample code and it does return an error in the console:

 

opt errorTypeError: window.ga is not a function

 

I'll also try the original code without the 1st 

/* _optimizely_redirect=http://custom */ line and report back ...

Level 3
andriym 07-14-15
 

Re: Combining JS Directives in a Variation's "Edit Code"

Update: I ran it like this and is probably still not working, though I'm really not sure. Check out the info below ...

 

$("head").append("<style>body{display:none;}</style>");
var url = window.location;
var redirect_url = 'http://' + url.hostname + url.pathname + '2' + url.search;
window.ga('send', 'event', 'Optimizely', 'exp-3190330509', 'Variation1', {'nonInteraction': 1});
window.location = redirect_url;

 

I don't actually see the event push in the output of the final page's GA debug console. But I do see this when I "preserve log" (the whole debug console sequence from Original page through to Redirected page), though I don't think this is really what should be happening:

 

Navigated to originalurl

Initializing Google Analytics.
Running command: ga("create" [the right tracker for my domain]
Running command: ga("set", "dimension2", "Optimizely_Exp_3190330509 (3190330509): Var_3176910307") [this is the right value for REDIRECTED Variation #1]
Running command: ga("send", "pageview") [for the originalurl]
Running command: ga("send", "event", "Optimizely", "exp-3190330509", "Variation1", {nonInteraction: 1}) [YAY there's the event i've been waiting for]
Navigated to url2 [this is the redirect happening]
Initializing Google Analytics.
Running command: ga("create", [again the right tracker]
Running command: ga("send", "pageview") [for url2]

> this send pageview event for the redirected page no longer has the 4 data points inside related to dimension/event tracking that the 1st ga send pageview above it did!

 

the fact that the dimension/event parameters have gone missing from the 2nd page is suspect. and actually so is the 2 separate send pageview events happening (should GA really see the original and redirected variation as 2 separate pageviews?). Seems like a big mess to me. At least with

Level 3
JDahlinANF 07-14-15
 

Re: Combining JS Directives in a Variation's "Edit Code"

Viewing a page is a pre-requisite for sending the event, so it *must* record the pageview before it can track the event (otherwise it would not know what page to attribute the event to).  If you do not want to see that pageview as part of the tracking in GA, you should investigate methods of sending the "i've been redirected by Optimizely" parameter on the second page rather than the first.

 

As an added benefit, doing this would allow the redirect code to run sooner reducing flicker.