ngx-tag-commander
This service lets you integrate Tag Commander in your AngularX (2+) applications easily.
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:
;
2- In your application, declare dependency injection:
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
;... { }
Declaring the route tracking
first configure the module to track routes in app.module
{ tcService; }
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;// you can also override some varibleif isNewUser TagCommanderService;// or set/update them individualyTagCommanderService; // you can also remove a varTagCommanderService;}
As a directive
You can use the directive tcSetVars direcly on any html node
<!-- other exemples --><!-- defaultLanguage being an attribut of your component -->
Get Var
In your controller
let myVar = TagCommanderService;
Capture Events
In a controller
let eventId = '1234';let data = '{"env_language": theEventVar}'; TagCommanderService;
As a directive
change to default language
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;// or you can reload all the containersTagCommanderService;
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;
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 containerTagCommanderService;// or you can reload all the containersTagCommanderService;
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: