Rich-text Reply

Limiting Optimizely Changes to a single virtual page in a SPA

parththakkar 03-09-16

Limiting Optimizely Changes to a single virtual page in a SPA

[ Edited ]

Hello,

I was wondering how I could limit my Optimizely Changes to just one page on a Single Page Application of mine.

I do have a virtual pageview for each of the 'pages' or 'slides' in my SPA.

A little more background info: I have a multi-page funnel that operates under a single url. My test runs on the first page, or lander, of the funnel, but I don't want it to make changes elsewhere/later in the funnel - however - I don't want to disable the experiment because I still want to track goals throughout the funnel (custom event goals).

Any tips/advice/input?  

Thanks!

Analyst
JDahlinANF 03-09-16
 

Re: Limiting Optimizely Changes to a single virtual page in a SPA

A couple of ideas worth exploring:

 

1- Conditional Activation - when the specific page loads, trigger the experiment after the new content is loaded into the DOM.  The advantage of this is that it limits the number of users that Optimizely sees as "in" your experiment.

 

2- Let the experiment target all users, but have your variation code only run when a specific trigger is detected.  This disadvantage here is that your visitor count in Optimizely will be "everyone" which will dilute their ability to measure differences in click goals on the page.

e.g.,

function magicStuff(){
	//the magic goes here
}

$(window).on('specificPageHasLoaded',function(){
    magicStuff();
});

Re: Limiting Optimizely Changes to a single virtual page in a SPA

[ Edited ]

To follow up with this, I did something pretty similar. In my particular case I don't get hard reloads between my virtual pages, BUT I can listen for attribute changes and scan for elements that would become visible or disappear at each step of my funnel. I went with that solution because my plan does not have the conditional activation feature.

So I used the attrChange library to accomplish this and it is working very well as a solution to this issue.

The attrChange library in question link here

My implementation:

loadScript('https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js', function(){


    window.$("#PRODUCT_FIELD_GROUP").attrchange({
        trackValues: true,
        callback: function (event) {
            //event.attributeName - Attribute Name
            //event.oldValue - Prev Value
            //event.newValue - New Value

            //Logic
            if ($("#PRODUCT_FIELD_GROUP").is(":visible")) {
                //Code Goes Here
            }
        }

    });
});


To import the javascript, I got the loadscript function from the optimizely documentation.

 

Analyst