Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
ngx-tag-commander
Advanced tools
This service lets you integrate CommandersAct's tag container in your Angular applications easily. - **Note**: Familiarize yourself with [CommandersAct's tag container's primary documentation](https://doc.commandersact.com/features/sources/sources-catalo
This service lets you integrate CommandersAct's tag container in your Angular applications easily.
The following table gives an overview of which version of ngx-tag-commander
to use depending on your project's Angular version.
Angular version | ngx-tag-commander@3.0.0 (current) | ngx-tag-commander@2.0.0 | ngx-tag-commander@1.3.1 |
---|---|---|---|
17.x.x | ✅ | ⚠️ | ❌ |
16.x.x | ✅ | ⚠️ | ❌ |
15.x.x | ❌ | ✅ | ❌ |
14.x.x | ❌ | ✅ | ❌ |
13.x.x | ❌ | ✅ | ❌ |
12.x.x | ❌ | ✅ | ❌ |
11.x.x | ❌ | ❌ | ⚠️ |
10.x.x | ❌ | ❌ | ⚠️ |
9.x.x | ❌ | ❌ | ⚠️ |
8.x.x | ❌ | ❌ | ⚠️ |
7.x.x | ❌ | ❌ | ✅ |
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.
The plugin doesn't replace the standard setup of a container because you may need to use the containers outside 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 = []
You can install the module from a package manager of your choice directly from the command line
npm i ngx-tag-commander
...
import { WindowRef } from 'ngx-tag-commander';
...
import { NgxTagCommanderModule } from 'ngx-tag-commander';
@NgModule({
...
imports: [
...
NgxTagCommanderModule
...
],
providers: [WindowRef],
...
})
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.
Some methods are asynchronous. If you want to ensure that a method has been executed before continuing, you can use the await keyword. Please check the function definition to see if it is asynchronous.
import { TagCommanderService } from 'ngx-tag-commander';
...
export class MyComponent {
constructor(private tcService: TagCommanderService) {
...
}
}
// Adding a container
await tcService.addContainer('my-custom-id', '/url/to/container.js', 'head');
// Removing a container
tcService.removeContainer('my-custom-id');
// Set variables
tcService.setTcVars({ env_template : "shop", env_work: 'dev', ... });
// Update a single variable, you can also overwrite existing variables
tcService.setTcVar('env_template', 'super_shop');
// Get a variable
const myVar = wrapper.getTcVar('env_template');
// Remove a variable
tcService.removeTcVar('env_template');
SetTcVarsDirective
You can also use the directive SetTcVarsDirective
to set variables directly on any html node:
<div [tcSetVars]="{ env_template: defaultEnv }"></div>
triggerEvent
is the new name of the old method captureEvent
; an alias has been added to ensure backward compatibility.// Triggering an event
// eventLabel: Name of the event as defined in the container
// htmlElement: Calling context. Usually the HTML element on which the event is triggered, but it can be the component.
// data: event variables
tcService.triggerEvent(eventLabel, htmlElement, data);
TcEventDirective
TcEventDirective
. The event will be triggered when clicking the button.<button [tcEvent]="'test'" [tcEventLabel]="'test'" [tcEventObj]="cartItems">Add Items in ShopCart</button>
Update your container after any variable change.
tcService.reloadContainer(sideId, containerId, options);
Automatic reload can be performed on route change.
tcService.trackRoutes(true);
tcInclude
property to your routes:const appRoutes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full',
data: {
tcInclude: [{
idc: 12,
ids: 4056,
options: {...}
}]
}
},
{
path: 'home',
component: IndexPageComponent,
data: {
tcInclude: [{
idc: 12,
ids: 4056,
options: {...}
}]
}
}
];
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.
ngx-tag-commander
fully supports Server-side rendering (SSR), as it comes with an internal check to run the code only on the client-side.
This is important as the wrapper is interacting with the DOM objects document
and window
, which are not available on the server.
TagCommanderService.addContainer(id: string, uri: string, node: string): Promise<void>
id
: The id the script node will haveuri
: The source of the scriptnode
: The node on witch the script will be placed. Can either be head
or body
TagCommanderService.removeContainer(id: string): void
id
: The id of the container to removeTagCommanderService.setDebug(debug: boolean): void
debug
: TagCommanderService will display debug messages if set to true
TagCommanderService.trackRoutes(b : boolean): void
b
: TagCommanderService will reload containers on route change if set to true
TagCommanderService.setTcVar(tcKey: string, tcVar: any): void
tcKey
: Key of the variable to set or updatetcVar
: Data of the variableTagCommanderService.setTcVars(vars: object): void
vars
: Object containing the multiple variables to set or updateTagCommanderService.getTcVar(tcKey: string): any
tcKey
: Key of the variable to getTagCommanderService.removeTcVar(tcKey: string): void
tcKey
: Key of the variable to removeTagCommanderService.reloadAllContainers(options: object): number
options
: Options passed to tC.container.reload(options)
TagCommanderService.reloadContainer(siteId: string, containerId: string, options: object): number
siteId
: Site idcontainerId
: Container Idoptions
: Options passed totC[containerId].reload(options)
TagCommanderService.triggerEvent(eventLabel: string, htmlElement: HTMLElement, data: object)
eventLabel
: Name of the eventhtmlElement
: DOM element where the event is attacheddata
: Data sent with the eventTo help you with your implementation we provided a sample application. To run it clone the repo and ensure you have Node.js >=18.x.x installed. Then run in the base folder:
npm install
npm start
After that, visit http://localhost:4200/.
The implementation of the ngx-tag-commander
library can be found in /projects/ngx-tag-commander
. Changes can be tested using the sample app described above.
Useful commands (ensure you have Node.js >=18.x.x installed & run in the base folder):
npm install
npm start
npm run lint
npm run test
npm run test-sample-app
npm run build
To contribute to this project, please read the CONTRIBUTE.md file.
As Angular itself, this module is released under the permissive MIT License. Your contributions are always welcome.
FAQs
This service lets you integrate CommandersAct's tag container in your Angular applications easily. - **Note**: Familiarize yourself with [CommandersAct's tag container's primary documentation](https://doc.commandersact.com/features/sources/sources-catalo
The npm package ngx-tag-commander receives a total of 218 weekly downloads. As such, ngx-tag-commander popularity was classified as not popular.
We found that ngx-tag-commander demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.