Tagging an AngularJS site

Data collection / JavaScript / Advanced features / Tagging an AngularJS site

Foreword

Before using our tagging directives, please make sure you have initialised the AT Internet JavaScript Tracker and selected the desired plugins from within the Tag Composer interface.

Principle

The tagging directive “ui.atinternet.smartTag.directive” allows, by default, the tagging of pages and clicks. For this, it contains:

• Two methods, “pageSend()” and “clickSend()”, declared in a service “tagService” that can be used from the JavaScript code of your controllers,
• Two directives “tagClick” and “tagpage” that can be used from the HTML code of your views.

Tagging

Integration

1. Integration of the tagging directive

   You must add the following tagging module code in a JavaScript file (ex: “moduletag.js”) within your AngularJS application.

'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);
    };
});

This module contains:

• Two directives “tagClick” and “tagpage” useful for click and page tagging in the tags contained in the views of your Web application,
• A tagging service including:
  • A “getTag()”method that returns an instance of the Tracker,
  • A “pageSend()” method that takes an object as a parameter, useful for sending page hits from the controller code in JavaScript,
  • A “clickSend()” method that takes an object as a parameter, useful for sending click hits from the controller code in JavaScript.

It’s possible to use the tracker’s standard JavaScript methods in the controller code.

2. Addition of a reference to the “smartTag” module in the application’s main module

'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. Adding “smarttag.js” scripts (Tracker code) and “moduletag.js” (module code) in your application’s main page.

<!-- atinternet:js -->
<script src="scripts/atinternet/moduletag.js"></script>
<script src="scripts/atinternet/smarttag.js"></script>
<!-- endatinternet -->

You may replace the local “smarttag.js” file with a resource from the AT Internet CDN if needed:

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

Tagging a view

In the case of a page

To tag a page, you must add the following tag in the HTML code of your view:

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

The tag for page tagging must have “tagPage” as its label. This tag contains a “tag-data” attribute that has, as a value, an object in the form of a character string with the different page parameters to be measured.

In the case of a click

To tag a click, you must add the following attributes in the clickable tags of your view:

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

Click tagging is done by the addition of different attributes:

• “tag-click” allowing the association of the click tagging directive to the tag (mandatory),
• “tag-chapter1” allowing the declaration of a first-level chapter,
• “tag-chapter2” allowing the declaration of a second-level chapter,
• “tag-chapter3” allowing the declaration of a third-level chapter,
• “tag-level2” allowing the declaration of a level 2 site,
• “tag-action” allowing the declaration of a click type.

Tagging a controller

In the case of a page

To tag a page, you must call the method “pageSend()” in the JavaScript code of your controller:

'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'}});
});

In the case of a click

To tag a click, you must call the method “clickSend()” in the JavaScript code of your controller:

'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();
});

You must add a reference to the tagging service “tagService” in the function passed as a parameter of the controller.

Last update: 11/03/2019