Installing Convert Experiences on a Vue.js app.

New Convert Technology for running tests on Vue.js

We are excited to tell you that Convert has now developed some technology that allows running light experiments on any kind of SPA site while using the Visual Editor. 

For taking advantage of this technology, please contact support and ask them to enable this on your project.

The way this technology works is that it will listen to changes in your URL, and then it will evaluate all experiments or personalization conditions and bucket the visitor in the correct ones and run its variation code.

Then it will poll the page every 50ms for any change on the elements of the page, and then if a change is detected it will execute the variation code once more. This ensures that if the SPA is constantly updating the elements on the page, this technology will keep updating the page with the experiment or personalization changes.

Alternatively, you can use the options below to deploy an experiment in your SPA. We recommend trying this new technology first, before venturing into the alternative options.

Alternative Vue.js Solutions

Vue.js is a Single Page App (SPA) Framework. That means that Vue.js needs a special process to install Convert on it.

A normal web app, loads changes via page loads. On SPAs the changes are loaded via Views which do not need to load the page again.

With the standard implementation, Convert will enable experiment or personalization changes just after the page has loaded.

The optimal place to enable the changes is after the view has been shown or mounted. Please see the following article to understand the Vue.JS lifecycle.

This article explains how to configure your app to Convert to enable those changes after the view has loaded.

Solution

1) Install the Convert JS tracking code in the HTML of your pages as per the instructions. Choose the method that is more convenient for you.

2) Add the following code to your export default statement:

See the Pen Vue.js Triggering Polling Sequence by Convert.com (@gcrewe) on CodePen.


This code will trigger Convert's polling sequence when the view is "mounted". The polling sequence is the one that checks every single experiment conditions for each experiment or personalization that you have created in your project.

However, you can also trigger a specific experiment to be enabled with the following code:

See the Pen Vue.js Triggering a Specific Experiment by Convert.com (@gcrewe) on CodePen.


Just consider that the experiment conditions will still be tested even with this statement, but only for that specific experiment.

Need assistance? Start a conversation with our Support Team.
CONVERT MORE

Reliably Convert More Site Visitors, Even If Everything Else is Changing in Your Business.

START 15-DAY FREE TRIAL
✓ No Credit Card  ✓ Easy Set-Up  ✓ Access All Features

Comments