Angular TagCommander Sample application

The loading and configuration

The main application configuration

import angularJsTagCommander from 'angularjs-tag-commander';

// declar the angularjsTagCommander
angular.module('tag-commander-exemple-app', [
    angularJsTagCommander
]).config(['TagCommanderProvider', (TagCommanderProvider) => {

    // you need to provide URIS to load containers script.
    // function addContainer (id, uri, node)
    TagCommanderProvider.addContainer('a_name_for_the_container_id', '/the/path/to/tag-commander-container.js', 'head');
    // you can add as many container as you like

    // but you can also remove them
    TagCommanderProvider.removeContainer('my_tag_container_id');

    // you can set debug by setting this to true
    TagCommanderProvider.setDebug(true);

    // you can track the url of your app by setting this, it will reload the containers on each page change
    TagCommanderProvider.trackRoutes(true);

    // you can also set the name of the event witch is triggered the page change,
    // the default is set to '$routeChangeSuccess'
    TagCommanderProvider.setPageEvent('$stateChangeSuccess');
}]);

In the provider's method 'addContainer', The "node" parameter can either be set to 'body' or 'head', by default the container will be placed in the head.

The routes configuration

If you have set TagCommander.trackRoutes(true); in your application configuration, you can configure witch container will be reloaded on witch route, else what you need to do it in your controller. the containers will be reloaded after the controller has been executed, but if you change or set a varible in your controller methode you will need to call TagCommander.reloadAllContainers(options) to propagate the changes to your containers.

export const appRouteProvider = ['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/home', {
      controller: homeComponent,
      tcReloadOnly: ['4056', '12'] // will only reload the container 4056_12
    })
    .when('/shop', {
      controller: shopComponent,
      tcReloadOnly: [
        {ids: '4056', idc: '12'}, 
        {ids: '4056', idc: '11', options: 
          ["datastorage", "deduplication"] // you can set the options for your container
        }
      ]
    })
    .when('/dashboard', {
      controller: dashboardComponent,
      // if no tcReloadOnly is set it will reload all the containers if the trackRoute is true (in the configuration)
    })
}];    

If you don't set the TagCommanderProvider.trackRoutes(true); (or you set it to false) you will have to reload your container manually

// somewhere in your controller
// reload a specifique container
TagCommander.reloadContainer(ids, idc, options);
// or you can reload all the containers
TagCommander.reloadAllContainers(options);

How to set your Vars

In your controller

// first of all you need to inject the tagCommander module in your page controller
export default ['$scope', 'TagCommander', function shopController(TagCommander) {

    then once in your controller you can set the page varibles. The method set Vars only accept objects
    TagCommander.setTcVars({
        env_template : "shop",
        env_work : "dev",
        env_language : "en",
        user_id : "124",
        user_logged : "true",
        user_age: "32",
        user_newcustomer : "false",
    });
    // you can also override some varible
    if (isNewUser) {
        TagCommander.setTcVars({
            user_newcustomer : "true",
        });
    }
    // or set/update them individualy
    TagCommander.setTcVar('env_template', 'super_shop');
}

Using a directive

you can set your tc_vars with a directive that you can implement on the DOM node

<html-element class="sm-button green-500" tc-set-vars='{"env_language": "fr"}'></html-element>

// other exemples
<template class="sm-button green-500" tc-set-vars='{"env_language": $ctrl.default_language}'></template>
<div class="sm-button green-500" tc-set-vars='{"env_language": $scope.default_language}'></div>

You need to provide the key of your var and it's value. The object provided have to be a JSON between single quote. You can also use your $ctrl and $scope vars, but you do not need to surround them with double quote.

How to get your Vars

In your controller

var myVar = TagCommander.getTcVar('VarKey');

How to remove a Var

In your application controller

TagCommander.removeTcVars('env_template');

How to capture an Event

In your controller

var eventId = '1234';
var data = '{"env_language": $ctrl.default_language}';

TagCommander.captureEvent(eventId, data);

Using a directive

<button class="sm-button green-500" tc-event='{eventId: myEventId, data: {"env_language": $scope.default_language}}'> change to default language </button>

How to reload containers

When you update your varible you also need to update your container to propagate the changes

var idc = '1234';
var ids = '1234';
var options = {
    exclusions: [
        "datastorage",
        "deduplication",
        "internalvars",
        "privacy"
    ]
};
TagCommander.reloadContainer(ids, idc, options);
// or you can reload all the containers
TagCommander.reloadAllContainers(options);