Marquage d’un site AngularJS

 

Avant-propos

Avant d’utiliser nos directives de marquage, veuillez-vous assurer d’avoir initialisé le Tracker JavaScript AT Internet et sélectionné les plugins souhaités depuis l’interface Tag Composer.

 

Principe

La directive de marquage « ui.atinternet.smartTag.directive » permet, par défaut, de marquer des pages et des clics. Elle contient pour cela :

  • deux méthodes « pageSend() » et « clickSend() » déclarées dans un service « tagService » utilisable depuis le code JavaScript de vos contrôleurs,
  • deux directives « tagClick » et « tagpage » utilisables depuis le code HTML de vos vues.
 

Marquage

 

Intégration

  1. Intégration de la directive de marquage

    Vous devez ajouter le code du module de marquage suivant dans un fichier JavaScript (ex: « moduletag.js ») au sein de votre application AngularJS.

    'use strict';
    
    /**
     * @ngdoc directive
     * @name ui.atinternet.smartTag.directive:smartTag
     * @description
     * # smartTag
     *
     * smartTag module.
     */
    angular.module('ui.atinternet.smartTag', [])
      .directive('tagClick', function (tagService) {
        var _setDeclaredProperty = function(obj, scope, key) {
          if(typeof scope[key] !== 'undefined') {
            obj[key] = scope[key];
          }
        };
        var _addPropertiesToObject = function(scope, elem){
          var obj = {
            elem: elem,
            name: scope.name,
            level2: scope.level2,
            type: scope.action
          };
          _setDeclaredProperty(obj, scope, 'chapter1');
          _setDeclaredProperty(obj, scope, 'chapter2');
          _setDeclaredProperty(obj, scope, 'chapter3');
          return obj;
        };
        return {
          restrict: 'A',
          scope: {
            name: '@tagName',
            chapter1: '@tagChapter1',
            chapter2: '@tagChapter2',
            chapter3: '@tagChapter3',
            level2: '@tagLevel2',
            action: '@tagAction'
          },
          link: function postLink(scope, element) {
            var obj = _addPropertiesToObject(scope, element[0]);
            tagService.clickSend(obj);
          }
        };
      })
      .directive('tagpage', function (tagService) {
        return {
          restrict: 'E',
          scope: {
            tagData : "="
          },
          link: function postLink(scope) {
            tagService.pageSend(scope.tagData);
          }
        };
      })
      .service('tagService', function () {
        var _tag = new ATInternet.Tracker.Tag();
        this.getTag = function() {
          return _tag;
        };
        this.pageSend = function(obj) {
          _tag.page.set(obj);
          _tag.dispatch();
        };
        this.clickSend = function(obj) {
          _tag.clickListener.send(obj);
        };
    });

    Ce module contient :

    • deux directives « tagClick » et « tagpage » utiles pour le marquage de clics et de pages dans des balises contenues dans les vues de votre application Web,
    • un service de marquage comprenant :
      • une méthode « getTag() » retournant une instance du Tracker,
      • une méthode « pageSend() » prenant un objet en paramètre, utile pour l’envoi de hits de page depuis le code des contrôleurs en JavaScript,
      • une méthode « clickSend() » prenant un objet en paramètre, utile pour l’envoi de hits de clic depuis le code des contrôleurs en JavaScript.

    Il est possible d’utiliser les méthodes JavaScript standards du Traker dans le code des contrôleurs.

  2. Ajout d’une référence au module « smartTag » dans le module principal de l’application
    'use strict';
    
    /**
     * @ngdoc overview
     * @name angularApp
     * @description
     * # angularApp
     *
     * Main module of the application.
     */
    angular
      .module('angularApp', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch',
        'ui.atinternet.smartTag'
      ])
      .config(function ($routeProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
          })
          .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutCtrl'
          })
          .otherwise({
            redirectTo: '/'
          });
      });
    
  3. Ajout des scripts « smarttag.js » (code du Tracker) et « moduletag.js » (code du module) dans la page principale de votre application.
    <!-- atinternet:js -->
    <script src="scripts/atinternet/moduletag.js"></script>
    <script src="scripts/atinternet/smarttag.js"></script>
    <!-- endatinternet -->

    Vous pouvez si besoin remplacer le fichier « smarttag.js » local par une ressource présente sur le CDN AT Internet :

    <script src="https://tag.aticdn.net/YOURSITEID/smarttag.js"></script>
 

Marquage d’une vue

 

Cas d’une page

Pour marquer une page, il suffit d’ajouter la balise suivante dans le code HTML votre vue :

<tagpage tag-data="{name: 'main', chapter1:'chap1', chapter2:'chap2', chapter3:'chap3', level2: '1', customObject: {arg1:3, arg2:'4'}}"></tagPage>

La balise de marquage de page doit avoir pour libellé : « tagPage ». Elle contient un attribut « tag-data » ayant pour valeur un objet sous la forme d’une chaîne de caractères avec les différents paramètres de page à mesurer.

 

Cas d’un clic

Pour marquer un clic, il suffit d’ajouter les attributs suivants dans les balises cliquables de votre vue :

<a tag-click tag-name="clickName" tag-chapter1="chap1" tag-chapter2="chap2" tag-chapter3="chap3" tag-level2="1" tag-action="action" ng-href="URL">Link</a>

Le marquage de clic se fait par l’ajout de différents attributs :

  • « tag-click » permettant d’associer la directive de marquage de clic à la balise (obligatoire),
  • « tag-chapter1 » permettant de déclarer un chapitre de premier niveau,
  • « tag-chapter2 » permettant de déclarer un chapitre de deuxième niveau,
  • « tag-chapter3 » permettant de déclarer un chapitre de troisième niveau,
  • « tag-level2 » permettant de déclarer un site de niveau 2,
  • « tag-action » permettant de déclarer un type de clic.
 

Marquage d’un contrôleur

 

Cas d’une page

Pour marquer une page, vous devez faire appel à la méthode « pageSend() » dans le code JavaScript de votre contrôleur :

'use strict';

/**
 * @ngdoc function
 * @name angularApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the angularApp
 */
angular.module('angularApp')
  .controller('MainCtrl', function ($scope, tagService) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    tagService.pageSend({name: 'pageName', chapter1: 'chap1', chapter2: 'chap2', chapter3: 'chap3', level2: '1', customObject: {arg1: 3, arg2: '4'}});
});
 

Cas d’un clic

Pour marquer un clic, vous devez faire appel à la méthode « clickSend() » dans le code JavaScript de votre contrôleur :

'use strict';

/**
 * @ngdoc function
 * @name angularApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the angularApp
 */
angular.module('angularApp')
  .controller('MainCtrl', function ($scope, tagService) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    var link = document.createElement('a');
    link.href='javascript:void(0)';
    tagService.clickSend({elem: link, name: 'clickName', chapter1: 'chap1', chapter2: 'chap2', chapter3: 'chap3', level2: '1', type: 'navigation'});
    link.click();
});

Vous devez ajouter une référence au service de marquage « tagService » dans la fonction passée en paramètre du contrôleur.

Dernière mise à jour : 11/03/2019