Installing Convert Experiences on a Vue.js app.

Issue

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 load the page again.

With the standard implementation Convert will enable experiment or personalizations 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 for Convert to enable those changer after the a 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 which 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.

Have more questions? Submit a request

Comments