How to Install the Main Tag / Convert Tracking Code / JavaScript

THIS ARTICLE WILL HELP YOU:


Where to Install the main Convert Tracking Code

The main Convert tracking code needs to be installed in the <head> section of the page, before any other loaded resource. Placing it after the <title> tag is best.

It’s not an absolute requirement to install the code just after the <title> tag, but doing it this way ensures the best performance. The reason for this is that the Convert Experiments tracking request needs to be initiated as soon as possible on the page, giving it time to get the results back before the whole page finishes loading.

Convert experiments can run even if the code is installed on the footer of the web page. However, in that case, since the tracking request will be started just before the page has loaded, the variation changes arrive later in the browser. Therefore, there will be a greater amount of time to wait before the variation is visible. This can cause a distracting visual blink of the original page before the variation is seen.

Where to Find your Convert Tracking Code 

The main tracking code can be found on the Project Configuration. To find it, select your Project from the Project Panel:

Once you have selected your Project, on the top tabs select Configuration. You will then find the tracking code snippet under Tracking Code. 

Copy and paste the code and place it on your website as described in the previous section.

Basic or Advanced Snippet?

You should install the Basic Snippet, unless you are going to use Page Tags data to target, track, or segment in Convert. Page Tags are used to transferring data from your backend being your CMS, CRM, Ecommerce Engine to Convert, or any other system that may provide your data to be used within Convert.

The New Beta Tracking Script

The new beta tracking script is for customers who intend to try the improved speed experience. While this feature is still being tested, select customers can opt for it using the following process.

  1. Find the convert tracking code as per the steps mentioned above
  2. In the tracking URL, add “v1” just before “/js” in the existing tracking code URL. So it would look like this: https://cdn-4.convertexperiments.com/v1/js/NNN-NNN.js
  3. The new tracking code is better due to the following reasons:
    1. It is independent of jQuery
    2. It natively supports SPA(single-page applications)
    3. Better experiments rendering as it does not poll but relies on modern browser API mutation observer
    4. Smaller footprint (about 20%)

This script now has 2 options to block convert from running

  1. Pushing to queue using JavaScript with: window.conv_q.push({ what: 'disable' })
  2. Calling method: convert.disable()

Adding the query parameter: convert_disable=true

Other Tech Changes in the New Beta Tracking Script

  1. It's not required anymore to call the run method at first component mount of SPAs, now we detect force changes on component hydration.
  2. The shape of convert.data has been changed to match the new API specs at https://api.convert.com/doc/serving/
  3. The shape of convert.currentData has been changed in case exiting JS code relies on it:
    1. convert.currentData.experiments > convert.currentData.experiences : and for each Experience:
      1. first_time > firstTime
      2. variation_id > use nested id in variation property
      3. variation_name > use the nested name in variation property
      4. variation_name_parts > use variation property
    2. convert.currentData.experiments_goals > convert.currentData.experiencesGoals
  4. Some API methods have been renamed:
    1. triggerExperimentVariation > triggerExperienceVariation
    2. executeMissingDataExperiments > executeMissingDataExperiences
    3. checkExperiments > checkExperiences
    4. executeExperiment > executeExperience
    5. executeExperimentLooped > executeExperienceLooped
  5. All of the above exposed API methods must be pushed into Convert Queue _conv_q
  6. There's one new API method that can be called directly or pushed into the queue:
    1. convert.ready  or _conv_q.push({ what: 'ready' }) > when rendering complete (returns a promise).
  7. Variation Custom JS is now invoked only once per session.

Improved variation deciding logic (now matching our JS SDK).

keywords: install convert implement implementation