Callbacks

 

Avant-propos

La gestion des « Callbacks » est une fonctionnalité du Tracker disponible à partir de la version 5.3.0. Cette option permet la prise en compte et l’exécution automatique de fonctions de marquage déclarées en dehors de la zone de marquage principale du site, dans des scripts externes de partenaires par exemple. Les principales problématiques que l’on peut rencontrer concernant l’exécution de Tags embarqués sont le mode de chargement (synchrone ou asynchrone) ou encore la disponibilité du Tracker au moment de l’appel. La fonctionnalité « Callbacks » apporte une solution en permettant la déclaration de fonctions totalement indépendantes qui seront automatiquement traitées par le Tracker au moment de son initialisation.

 

Principe

L’utilisation de la fonctionnalité implique un format de marquage spécifique détaillé plus bas. Ce marquage pourra être positionné indifféremment avant ou après le marqueur principal.

 

Paramétrage

La fonctionnalité doit être activée depuis la configuration générale dans l’interface Tag Composer :

  • Gérer les callbacks : Cette option, cochée par défaut, permet la gestion automatique des callbacks (option cochée : fonctionnalité activée, option décochée : fonctionnalité désactivée).
 

Marquage

 

Exemple de marquage complet

<script type="text/javascript">
    // Tag "Callbacks"
    window.ATInternet = window.ATInternet || {};
    window.ATInternet.Callbacks = window.ATInternet.Callbacks || {};
    window.ATInternet.Callbacks.Callback1 = window.ATInternet.Callbacks.Callback1 || function (tag) {
        tag.mvTesting.set({
            test: '1[My_first_Test]',
            waveId: 1,
            creation: '2[Version2_page_subscription]'
        });
        tag.mvTesting.add({
            variable: '1[Header]',
            version: '2[Grey]'
        });
        tag.mvTesting.add({
            variable: '2[Sidebar]',
            version: '4[Black]'
        });
    };
    window.ATInternet.Utils = window.ATInternet.Utils || {dispatchCallbackEvent: function () {}};
    window.ATInternet.Utils.dispatchCallbackEvent('Callback1'); 
    
    // Main tag
    var tag = new ATInternet.Tracker.Tag();
    tag.page.set({
        name: 'pageName',
        customObject: {
            MyPageLabel: 'my_page',
            MyChapters: {level1: 'my_chapter1', level2: 'my_sub_chapter1', level3: 'my_sub_chapter2'}
        }
    });
    tag.dispatch(); 
</script>

Un marquage « Callbacks » se compose de différentes parties :

 

La déclaration de la fonction callback

<script type="text/javascript">
    window.ATInternet = window.ATInternet || {};
    window.ATInternet.Callbacks = window.ATInternet.Callbacks || {};
    window.ATInternet.Callbacks.Callback1 = window.ATInternet.Callbacks.Callback1 || function (tag) {
        tag.mvTesting.set({
            test: '1[My_first_Test]',
            waveId: 1,
            creation: '2[Version2_page_subscription]'
        });
        tag.mvTesting.add({
            variable: '1[Header]',
            version: '2[Grey]'
        });
        tag.mvTesting.add({
            variable: '2[Sidebar]',
            version: '4[Black]'
        });
    };
</script>

Note : Dans cet exemple, la fonction callback a pour libellé « Callback1 ». Ce libellé est libre mais doit rester unique sur une même page. Dans le cas de deux libellés identiques, seul le premier callback sera considéré. La fonction contient un marquage spécifique MV Testing mais permet techniquement tout type de marquage.

 

La génération d’un événement spécifique permettant l’inscription sur la liste des callbacks dans le cas d’un chargement différé du code

<script type="text/javascript">
    window.ATInternet.Utils = window.ATInternet.Utils || {dispatchCallbackEvent: function () {}};
    window.ATInternet.Utils.dispatchCallbackEvent('Callback1'); 
</script>

Note : Dans cette partie de code, il est important de reprendre le même libellé que la fonction déclarée juste au-dessus (« Callback1 » dans notre exemple).

 

Exemple de marquage asynchrone

La fonctionnalité « Callbacks » est compatible avec la version asynchrone du Tracker qui nécessite toutefois une adaptation afin d’éviter d’écraser tout éventuel callback préalablement déclaré :

window.ATInternet = window.ATInternet || {};
window.ATInternet.onTrackerLoad = function () {
    window.tag = new window.ATInternet.Tracker.Tag();
    // your tag
}
(function(){      
    var at=document.createElement('script');
    at.type='text/javascript';   
    at.async=true;    
    at.src='http://www.site.com/smarttag.js';
    (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]||document.getElementsByTagName('script')[0].parentNode).insertBefore(at,null);   
})();
 

Marquage asynchrone complet

<script type="text/javascript">
    // Tag "Callbacks"
    window.ATInternet = window.ATInternet || {};
    window.ATInternet.Callbacks = window.ATInternet.Callbacks || {};
    window.ATInternet.Callbacks.Callback1 = window.ATInternet.Callbacks.Callback1 || function (tag) {
        tag.mvTesting.set({
            test: '1[My_first_Test]',
            waveId: 1,
            creation: '2[Version2_page_subscription]'
        });
        tag.mvTesting.add({
            variable: '1[Header]',
            version: '2[Grey]'
        });
        tag.mvTesting.add({
            variable: '2[Sidebar]',
            version: '4[Black]'
        });
    };
    window.ATInternet.Utils = window.ATInternet.Utils || {dispatchCallbackEvent: function () {}};
    window.ATInternet.Utils.dispatchCallbackEvent('Callback1');
    
    // Asynchronous tag    
    window.ATInternet = window.ATInternet || {};
    window.ATInternet.onTrackerLoad = function () {
        var Tag = ATInternet.Tracker.Tag;
        window.tag = new Tag();
        window.tag.page.set({
            name: 'pageName',
            customObject: {
                MyPageLabel: 'my_page',
                MyChapters: {level1: 'my_chapter1', level2: 'my_sub_chapter1', level3: 'my_sub_chapter2'}
            }
        });
        window.tag.dispatch();
    };
    (function () {
        var at = document.createElement('script');
        at.type = 'text/javascript';
        at.async = true;
        at.src = 'smarttag.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] || document.getElementsByTagName('script')[0].parentNode).insertBefore(at, null);
    })();
</script>
 

Personnalisation du marquage

Il est possible de personnaliser le marquage en renseignant différentes propriétés permettant des préciser les règles de prise en compte des callbacks pour un Tag donné. En effet, deux propriétés « include » et « exclude » permettent respectivement de déclarer une liste de callbacks (désignés par leur libellé) à exécuter ou au contraire à ignorer selon le besoin. Par défaut, lorsque la fonctionnalité est activée, chaque objet Tag déclaré dans la page déclenchera le code compris dans tous les callbacks, sachant qu’un callback hérite automatiquement des propriétés de configuration du Tag qui l’a déclenché (numéro de site, etc.).

 

Exemple d’inclusion de callback

<script type="text/javascript">
    // Tag "Callbacks" #1
    window.ATInternet = window.ATInternet || {};
    window.ATInternet.Callbacks = window.ATInternet.Callbacks || {};
    window.ATInternet.Callbacks.Callback1 = window.ATInternet.Callbacks.Callback1 || function (tag) {
        tag.mvTesting.set({
            test: '1[My_first_Test]',
            waveId: 1,
            creation: '2[Version2_page_subscription]'
        });
        tag.mvTesting.add({
            variable: '1[Header]',
            version: '2[Grey]'
        });
        tag.mvTesting.add({
            variable: '2[Sidebar]',
            version: '4[Black]'
        });
    };
    window.ATInternet.Utils = window.ATInternet.Utils || {dispatchCallbackEvent: function () {}};
    window.ATInternet.Utils.dispatchCallbackEvent('Callback1'); 
    
    // Tag "Callbacks" #2
    window.ATInternet = window.ATInternet || {};
    window.ATInternet.Callbacks = window.ATInternet.Callbacks || {};
    window.ATInternet.Callbacks.Callback2 = window.ATInternet.Callbacks.Callback2 || function (tag) {
        tag.click.set({
            name: 'clickName',
            chapter1: 'myChapter1',
            chapter2: 'myChapter2',
            chapter3: 'myChapter3',
            level2: 'clickLvl2',
            type: 'navigation',
            customObject: {
                param1: 'val1',
                param2: 2
            }
        });
    };
    window.ATInternet.Utils = window.ATInternet.Utils || {dispatchCallbackEvent: function () {}};
    window.ATInternet.Utils.dispatchCallbackEvent('Callback2');

    // Main tag
    var config = {
        callbacks: {
            include: ["Callback2"]
        }
    };    
    var tag = new ATInternet.Tracker.Tag(config);
    tag.page.set({
        name: 'pageName',
        customObject: {
            MyPageLabel: 'my_page',
            MyChapters: {level1: 'my_chapter1', level2: 'my_sub_chapter1', level3: 'my_sub_chapter2'}
        }
    });
    tag.dispatch(); 
</script>

Note : Dans cet exemple, seule la fonction callback ayant pour libellé « Callback2 » sera exécutée.

 

Exemple d’exclusion de callback

<script type="text/javascript">
    // Tag "Callbacks" #1
    window.ATInternet = window.ATInternet || {};
    window.ATInternet.Callbacks = window.ATInternet.Callbacks || {};
    window.ATInternet.Callbacks.Callback1 = window.ATInternet.Callbacks.Callback1 || function (tag) {
        tag.mvTesting.set({
            test: '1[My_first_Test]',
            waveId: 1,
            creation: '2[Version2_page_subscription]'
        });
        tag.mvTesting.add({
            variable: '1[Header]',
            version: '2[Grey]'
        });
        tag.mvTesting.add({
            variable: '2[Sidebar]',
            version: '4[Black]'
        });
    };
    window.ATInternet.Utils = window.ATInternet.Utils || {dispatchCallbackEvent: function () {}};
    window.ATInternet.Utils.dispatchCallbackEvent('Callback1'); 
    
    // Tag "Callbacks" #2
    window.ATInternet = window.ATInternet || {};
    window.ATInternet.Callbacks = window.ATInternet.Callbacks || {};
    window.ATInternet.Callbacks.Callback2 = window.ATInternet.Callbacks.Callback2 || function (tag) {
        tag.click.set({
            name: 'clickName',
            chapter1: 'myChapter1',
            chapter2: 'myChapter2',
            chapter3: 'myChapter3',
            level2: 'clickLvl2',
            type: 'navigation',
            customObject: {
                param1: 'val1',
                param2: 2
            }
        });
    };
    window.ATInternet.Utils = window.ATInternet.Utils || {dispatchCallbackEvent: function () {}};
    window.ATInternet.Utils.dispatchCallbackEvent('Callback2');

    // Main tag
    var config = {
        callbacks: {
            exclude: ["Callback2"]
        }
    };    
    var tag = new ATInternet.Tracker.Tag(config);
    tag.page.set({
        name: 'pageName',
        customObject: {
            MyPageLabel: 'my_page',
            MyChapters: {level1: 'my_chapter1', level2: 'my_sub_chapter1', level3: 'my_sub_chapter2'}
        }
    });
    tag.dispatch(); 
</script>

Note : Dans cet exemple, seule la fonction callback ayant pour libellé « Callback1 » sera exécutée, la fonction « Callback2 » ayant été exclue.

Dernière mise à jour : 26/08/2016