ngx-tag-commander

This service lets you integrate Tag Commander in your AngularX (2+) applications easily.

Official website

Features

automatic page tracking
event catching
multiple containers

Installation and Quick Start

The quick start is designed to give you a simple, working example for the most common usage scenario. There are numerous other ways to configure and use this library as explained in the documentation.

1- Installation:

You can install the module from a package manager of your choice directly from the command line

# Bower 
bower install ngx-tag-commander
 
# NPM 
npm i ngx-tag-commander

Or alternatively, grab the dist/index.ts and include it in your project

In your application, declare the ngx-tag-commander module dependency. in your app module:

import { NgxTagCommanderModule } from './ngx-tag-commander/ngx-tag-commander.module';

2- In your application, declare dependency injection:

@NgModule({
    ...
    imports: [
        ...
        NgxTagCommanderModule
    ],
    ..
})

3- add your Tag commander containers and start tracking:

import { TagCommanderService } from 'tag-commander';
...
export class AppModule {
  constructor(tcService: TagCommanderService) {
    ...
    tcService.addContainer('container_body', '/path/to/your/tag-commander.js', 'body');
    tcService.addContainer('container_head', '/path/to/your/other/tag-commander.js', 'head');
    ...
  }
}

Congratulations! angularjs-tag-commander is ready

Declaring TagCommander in your Controller

import { TagCommanderService } from './ngx-tag-commander/tag-commander.service/tag-commander.service';
...
export class MyComponent {
constructor(private tcService: TagCommanderService) { }
}

Declaring the route tracking

first configure the module to track routes in app.module

export class AppModule {
  constructor(tcService: TagCommanderService) {
    tcService.trackRoutes(true);
  }
}

then in your routes:

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full',
    data: {
      tcInclude: [{
        'idc':  12,
        'ids': 4056,
        options: {
          exclusions: ["datastorage", "deduplication"]
        }
      },
      {
        'idc':  11,
        'ids': 4055,
      }]
    }
  },

this will reload the specified containers, with the specified options

Set Vars

In a controller

The setVar call allows to set your tc_vars.

TagCommanderService.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) {
    TagCommanderService.setTcVars({
        user_newcustomer : "true",
    });
}
// or set/update them individualy
TagCommanderService.setTcVar('env_template', 'super_shop');
 
// you can also remove a var
TagCommanderService.removeTcVars('env_template');
}

As a directive

You can use the directive tcSetVars direcly on any html node

<html-element class="sm-button green-500" tc-set-vars='{"env_language": "fr"}'></html-element>
 
<!-- other exemples -->
<!-- defaultLanguage being an attribut of your component -->
<template class="sm-button green-500" tcSetVars="{'env_language': defaultLanguage}"></template>
<div class="sm-button green-500" tc-set-vars='{"env_language": $scope.default_language}'></div>

Get Var

In your controller

let myVar = TagCommanderService.getTcVar('VarKey');

Capture Events

In a controller

let eventId = '1234';
let data = '{"env_language": theEventVar}';
 
TagCommanderService.captureEvent(eventId, data);

As a directive

<button tcEvent="{'eventId': myEventId, 'data': {'env_language': envLanguage}}"> change to default language </button>

How to reload your container

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"
    ]
};
TagCommanderService.reloadContainer(ids, idc, options);
// or you can reload all the containers
TagCommanderService.reloadAllContainers(options);

Automatic reload of your containers by tracking Routes

The configuration

you need to set TagCommanderProvider.trackRoutes(true); to true in your app configuration

to be updated

TagCommanderService.trackRoutes(true);

then you can configure the your route by using the tcRealoadOnly option in your route 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
TagCommanderService.reloadContainer(ids, idc, options);
// or you can reload all the containers
TagCommanderService.reloadAllContainer(options);

Sample app

To help you with your implementaiton we provided a sample application. to run it

ng serve
or
npm start

then go to http://localhost:4200/

License

As AngularJS itself, this module is released under the permissive MIT License. Your contributions are always welcome.

Development

After forking you will need to run the following from a command line to get your environment setup:

yarn install

After install you have the following commands available to you from a command line: