Installing Convert Experiences on a Vue.js app.

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 experience 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:

export default {

  mounted: function () {
    this.$nextTick(function () {
      if (typeof(window.convert) != 'undefined') {
        var exp = window.convert.currentData.experiments;
        for(var expID in exp) {
          window._conv_q = window._conv_q || [];
          window._conv_q.push(["executeExperiment",expID]);
        }
      }
    })
  }
  
}

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

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

export default {

  mounted: function () {
    this.$nextTick(function () {
      window._conv_q = window._conv_q || [];
      // Replace  with your own
      window._conv_q.push(["executeExperiment",""])  
    })
  }
  
}

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