ngx-tag-commander

This service lets you integrate CommandersAct's tag container in your AngularX (12+) applications easily.

• Official website

Features

- Automatic page tracking - Set & Get Variables - Reloading Containers - Event catching - Multiple containers

Angular Version Compatibility

The library uses partial ivy builds to support projects with angular >= 12. For compatibility with angular 7 please use ngx-tag-commander@1.3.1, in between versions might be working but are not explicitly built for.

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- Before installing the plugin

The plugin doesn't replace the standard setup of a container because you may need to use the containers outside of the plugin.
Initialize your datalayer so that it's ready for the container and plugin, without losing any data. Do it as soon as possible on your website like in a <script> block in the head of your webapp.

tc_vars = []

2- Installation:

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

# NPM
npm i ngx-tag-commander

3- In your application app.module.ts, declare dependency injection:

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

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

4- add your tag containers and start tracking:

import { TagCommanderService } from 'ngx-tag-commander';

...

export class AppModule {
    constructor(tcService: TagCommanderService) {
        ...
        Promise.all([
            tcService.addContainer('container_body', '/assets/tag-commander-body.js', 'body'),// Replace URL by the one of your container
            tcService.addContainer('container_head', '/assets/tag-commander-head.js', 'head')
        ]).then(() => {
            //Insert the rest of your code here
        });
        ...
    }
}

You are now ready to use the ngx-tag-commander plugin.

Declaring TagCommander in your Controller

import { TagCommanderService } from 'ngx-tag-commander';
...

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: {
                    // Data Layer options if needed
                }
            },
                {
                    'idc': 11,
                    'ids': 4055,
                }]
        }
    },
];

This will reload the specified containers, with the specified options

Set Vars

The setTcVars call allows you to set your tc_vars.

constructor(private tcService: TagCommanderService) {
    tcService.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 variable
    if (isNewUser) {
        tcService.setTcVars({
            user_newcustomer: 'true',
        });
    }
    // or set/update them individually
    tcService.setTcVar('env_template', 'super_shop');
}

As a directive

You can use the directive tcSetVars directly on any html node

<html-element class="sm-button green-500" [tcSetVars]="{'env_language': 'fr'}"></html-element>

<!-- other exemple -->
<!-- defaultLanguage being an attribut of your component -->
<div class="sm-button green-500" [tcSetVars]="{'env_template': defaultEnv}"></div>

Retrieve or Delete Variables

import { WindowRef } from 'ngx-tag-commander';

constructor(private tcService: TagCommanderService) {
    ...
    // retrieve container variables
    tcService.getTcVar('your_var_key');
    // remove variable
    tcService.removeTcVar('your_var_key');
}

Capture Events

Trigger a custom event set in the container. For more information, check the community documentation

constructor(private tcService: TagCommanderService) {
    // {string} eventLabel the name of your event
    let eventLabel = 'NameEvent';
    // {HTMLElement} element the HTMLelement on which the event is attached
    let element = 'button';
    // {object} data the data you want to transmit
    let data = {'env_language': 'theEventVar'};

    tcService.captureEvent(eventLabel, element, data);
}

As a directive

<button [tcEvent]="'test'" [tcEventLabel]="'test'" [tcEventObj]="cartItems"> Add Items in ShopCart </button>

How to reload your container

In your app.module.ts on one of your routes please write tcInclude inside the data part. Note that reloading won't trigger any tags. In order for tags to be fired, you will need add the events options with a custom trigger event that you have previously configured in your container. Each keys are the event's label and the value is an array of parameters in order.

var idc = '1234';
var ids = '1234';
var options = {
    events: {page: [{}, {}]}, //custom trigger event page from the container. The array are the arguments, element and data
    // ...
    // other options
    // ...
};
this.tcService.reloadContainer(ids, idc, options);
// or you can reload all the containers
this.tcService.reloadAllContainers(options);

Automatic reload of your containers by tracking Routes

The configuration

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

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full',
    data: {
      tcInclude: [{
        idc: 12,
        ids: 4056,
        options: {
          // This object is the parameter for container reload
        }
      }]
    }
  },
  {
    path: 'home',
    component: IndexPageComponent,
    data: {
      tcInclude: [{
        idc: 12,
        ids: 4056,
        options: {
          // This object is the parameter for container reload
        }
      }]
    }
  }
];

Exclusions

You can state an exclusion array to your options object like below :

tcInclude: [{
    idc: 12,
    ids: 4056,
    options: {
        exclusions: [
            'datastorage',
            'deduplication',
            'internalvars',
            'privacy'
        ]
    }
}];

Please see the container's documentation for other options

Sample app

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

npm start

then go to http://localhost:4200/

Development

With Node >= 14.20
After forking, you will need to run the following from a command line to get your environment setup:

1. ``npm install``

After install you have the following commands available to you from a command line:
(optional) build the library by :
``npm run build``

Documentation

• ``TagCommanderService.addContainer( id : string, uri : string, node : string ): Promise``

- id : id the script node will have
- uri : uri the source of the script
- node : the node on witch the script will be placed, it can either be head or body

Return a promise which is resolved when the container has been loaded.

• ``TagCommanderService.removeContainer( id : string )``

- id : id the script node will have

• ``TagCommanderService.setDebug( debug : bool )``

- debug : will display the debug messages if true

• ``TagCommanderService.trackRoutes( b : bool )``

- b : will read routes if set to true

• ``TagCommanderService.setTcVar( tcKey : string, tcVar : any )``

set or update the value of the var

- tcKey : key in the data layer
- tcVar : content

• ``TagCommanderService.setTcVars( vars : any )``

set your variables for the different providers, when called the first time it instantiate the external variable

• ``TagCommanderService.getTcVar( tcKey : string )``

get the value of the container variable

- tcKey : key 

• ``TagCommanderService.removeTcVar( varKey : string )``

removes the var by specifying the key

- varKey : key of the variable

• ``TagCommanderService.reloadAllContainers( options : object )``

Reload all containers

- options to give to the ```tC.container.reload(options)``` function

• ``TagCommanderService.reloadContainer( ids : number, idc : number, options : object )``

Reload the specified container
- ids : Site Id
- idc : Container Id
- options : options for the function ```tC[containerId].reload(options)```

• ``TagCommanderService.captureEvent( eventLabel : string , element : HTMLElement, data : object )``

Set a TagCommander Event
- eventLabel : name of the event
- element : Dom Element where the event is attached
- data : data you want to send

License

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