npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-tag-commander-ng13

v1.0.0

Published

This service lets you integrate Tag Commander in your AngularX (2+) applications easily. - [Official website](https://www.commandersact.com/fr/produits/tagcommander/)

Downloads

1

Readme

ngx-tag-commander

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

Features

  • Automatic page tracking
  • Set & Get Variables
  • Reloading Containers
  • 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

# NPM
npm i ngx-tag-commander

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

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

2- In your application, declare dependency injection:

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

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

3- add your Tag commander containers and start tracking:

import { TagCommanderService } from 'ngx-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! ngx-tag-commander is ready

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 setVar call allows 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 varible
    if (isNewUser) {
      tcService.setTcVars({
      user_newcustomer : "true",
      });
    }
    // or set/update them individualy
    tcService.setTcVar('env_template', 'super_shop');
}

As a directive

You can use the directive tcSetVars direcly 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

In order to retrieve or delete container variables you first need to instanciate the data layer. Import WindowRef in your module

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

Then in your constructor :

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

constructor(private tcService: TagCommanderService, private windowRef :WindowRef) {
    windowRef.nativeWindow.tc_vars = {};
	...
	// retrieve container variables
    tcService.getTcVar("your_var_key"));
    // remove variable
    tcService.removeTcVar('your_var_key')
  }

Capture Events

constructor(private tcService: TagCommanderService) {
    // {string} eventLabel the name of your event
    let eventLabel=  'NameEvent';
    // {HTMLElement} element the HTMLelement on witch 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. You also need to state the event Page in the options.

var idc = '1234';
var ids = '1234';
var options = {
    events: {page: [{},{}]},
    // ...
    // 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: {
          // Data Layer options
        }
      }]
    }
  },
  {
    path: 'home',
    component: IndexPageComponent,
    data: {
      tcInclude: [{
        idc:  12,
        ids: 4056,
        options: {
			// Data Layer options
        }
      }]
    }
  }
];

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 Tag Commander documentation for other 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/

Development

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

  1. yarn install

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

Build the library by :

ng build NGX-TAG-COMMANDER

Documentation

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

    • id : id the 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
  • TagCommanderService.removeContainer( id : string )

    • id : id the 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.