Script de tracking

Prérequis

  • Vous devez connaître votre ou vos identifiant(s) logiciel(s) sous la forme “AP-XXXXX”. L’identifiant se trouve dans l’URL de la page d’édition du profil accessible depuis le compte vendeur :
    Récupérer son identifiant logiciel
    Dans cet exemple l’identifiant est « AP-25655 »
  • Chaque code correspond à un seul logiciel référencé dans appvizer.
  • Dans certains cas, vous devrez utiliser plusieurs codes.

Compatibilité

Le mécanisme global est compatible avec tous les navigateurs exceptés IE 11+ et, si le mode compatibilité n’est pas activé IE 7+.

Remarque importante : le script n’est pas compatible PhantomJS ni tout autre mode de rendu côté serveur (SSR) qui ne fournirait ni window ni document.

Installation du script

Deux méthodes d’installation sont possibles en fonction du site qui va accueillir le code :

  1. Sur des sites classiques avec des pages fixes (WordPress, Joomla!, …) où un lien engendre un changement de page ;
  2. Sur un site de type “single-page” (Angular, React, …) ou tout site dont le contenu est dynamiquement chargé.

 

Méthode 1 : installation sur des pages statiques

Dans le cas de pages statiques, il faut insérer le premier code sur la page d’atterrissage (Landing Page) et le second sur la page de conversion en prenant soin de modifier les deux éléments suivants :

  • le bon domaine d’appvizer (.fr, .com, .co.uk ou .es)
  • le bon identifiant logiciel sous la forme AP-XXXXX

1. Premier code à insérer sur la page d’atterrissage

Le domaine est à vérifier ligne 4 et l’identifiant logiciel est à modifier ligne 12 :

<script type="text/javascript">
  (function (w, d, id) {
    var ts = new Date().getTime();
    w.avURL = w.avURL || 'https://www.appvizer.one';
    w.avPool = w.avPool || [];
    w.avPool.push({start: ts, id: id});
    w.av = function () { w.avPool.push(arguments) };
    var e = document.createElement("script");
    e.async = true;
    e.src = w.avURL + '/ariadne/v1/ariadne.js?ts=' + ts;
    d.getElementsByTagName("head")[0].appendChild(e);
  })(window, document, 'AP-XXXXX');
  av("visit");
</script>

Exemple avec deux logiciels

 

2. Second code à insérer sur la page de conversion

Le domaine est à vérifier ligne 4 et l’identifiant logiciel est à modifier ligne 12 :

<script type="text/javascript">
  (function (w, d, id) {
    var ts = new Date().getTime();
    w.avURL = w.avURL || 'https://www.appvizer.one';
    w.avPool = w.avPool || [];
    w.avPool.push({start: ts, id: id});
    w.av = function () { w.avPool.push(arguments) };
    var e = document.createElement("script");
    e.async = true;
    e.src = w.avURL + '/ariadne/v1/ariadne.js?ts=' + ts;
    d.getElementsByTagName("head")[0].appendChild(e);
  })(window, document, 'AP-XXXXX');
  av("conversion");
</script>

Exemple avec deux logiciels

Méthode 2 : installation sur un site dynamique

Pour les sites de type Angular, React, …, le script de tracking est chargé une seule fois au chargement du site puis appelé à la demande. Cette méthode convient également aux sites ayant plusieurs logiciels sur une même page.

Le code général (1) doit être appelé avant les autres. Une bonne pratique est de mettre dans la section <head> et les deux autres (2) et (3) dans la section <body>

1. Code général à appeler dans la section <head>

<script type="text/javascript">
  (function (w, d, id) {
    var ts = new Date().getTime();
    w.avURL = w.avURL || 'https://www.appvizer.one';
    w.avPool = w.avPool || [];
    w.avPool.push({start: ts, id: id});
    w.av = function () { w.avPool.push(arguments) };
    var e = document.createElement("script");
    e.async = true;
    e.src = w.avURL + '/ariadne/v1/ariadne.js?ts=' + ts;
    d.getElementsByTagName("head")[0].appendChild(e);
  })(window, document);
</script>

 

2. Code à insérer sur la page d’atterrissage dans la section <body>

Il peut s’agir du formulaire d’inscription, de la page du logiciel ou d’une popup d’inscription

<script type="text/javascript">
  av("visit", {id: 'AP-XXXXX'});
</script>

Exemple avec deux logiciels

Le code peut être également intégré à un bouton d’action :

<button onclick="av('visit', {id: 'AP-XXXXX'});">Afficher mon produit</button>

 

3. Code à insérer sur la page de conversion dans la section <body>

<script type="text/javascript">
  av("conversion", {id: 'AP-XXXXX'}); 
</script>

Exemple avec deux logiciels

Le code de conversion peut également être insérer dans un bouton :

<button onclick="av('conversion', {id: ''AP-XXXXX'});">Conversion</button>

Le code de conversion peut également être insérer dans un lien hypertexte :

<a href=”http://...” onclick="av('conversion', {id: ''AP-XXXXX'});">Conversion</a>

Vérification de l’installation 

Pour vérifier que l’installation a été bien réalisé, voici les différentes étapes :

  1. Présence du script dans la page sur chrome par exemple:
    1. Ouvrir la console de votre navigateur,
    2. Aller dans l’onglet Element,
    3. Rechercher ariadne,
    4. Trouver l’emplacement du script à partir de l’identifiant de votre application sous la forme AP-XXXXX : Si vous ne trouvez pas ces événements, le script n’est pas bien installé.
    5. Trouver les événements av(‘visit’) ou av(‘conversion’) : Si vous ne trouvez pas ces événements, le script n’est pas bien installé.
  2. Présence des événements dans la page :
    1. Aller dans l’onglet ‘Network’, puis sous onglet ‘XHR’
    2. Rechercher appvizer  ou ariadne dans les requêtes 
    3. Trouvez les requêtes appvizer : Si vous ne trouvez pas ces événements, le script n’est pas bien installé.

 

Les scripts de tracking ne sont plus affichés dans la page Analysis du compte client après les premières conversions.

Utilisation avancée

Pour les utilisateurs avancés, voici la publication de l’API de suivi des conversions. La fonction globale av(), accepte les objets ayant les propriétés :

Exemple :

<script type="text/javascript">
  av({event: "visit", id: 'AP-1234'}); 
</script>

Script de tracking
4