vue-tag-commander

Integrate CommandersAct's tag container with your Vue applications seamlessly using the vue-tag-commander wrapper.

- Note: Familiarize yourself with CommandersAct's tag container's primary documentation before proceeding.

Table of Contents

- Features
- Installation and Quick Start
- Methods
- Container Management
- Variable Management
- Events
- Reloading Containers
- Server-side Rendering (SSR)
- Sample App
- License
- Development
- Contribute

Features

- Automatic page tracking
- Event triggering
- Supports multiple containers

Installation and Quick Start

$3

1. Using NPM:
``bash
npm i vue-tag-commander
`

2. Direct Include: Fetch dist/index.es5.min.js or index.es6.min.js and include it in your project.
`html

`

$3

1. For ES6:
`js
import TC_Wrapper from 'vue-tag-commander';
`

2. For ES5:
`js
const TC_Wrapper = require('vue-tag-commander');
`

3. Direct Include:
`javascript
const TC_Wrapper = window.TC_Wrapper;
`

$3

1. Initialize your Data Layer: Set up your data layer early in your web application, preferably in a
`
- Vue 2:
`js



`


Methods

Many 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.

$3


`js
// Adding a container
await wrapper.addContainer('my-custom-id', '/url/to/container.js', 'head');

// Removing a container
wrapper.removeContainer('my-custom-id');
`

$3


`js
// Set variables
await wrapper.setTcVars({ env_template : "shop", ... });

// Update a single variable
await wrapper.setTcVar('env_template', 'super_shop');

// Get a variable
const myVar = wrapper.getTcVar('VarKey');

// Remove a variable
wrapper.removeTcVar('VarKey');
`

$3

- Refer to the base documentation on events for an understanding of events in general.
- The method "triggerEvent" is the new name of the old method "captureEvent"; an alias has been added to ensure backward compatibility.


`js
// 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
await wrapper.triggerEvent(eventLabel, htmlElement, data);
`

$3

#### Manual Reload
Update your container after any variable change.
`js
await wrapper.reloadContainer(siteId, containerId, options);
`

#### Exclusions
You can state an exclusion array to your options object like below.
`typescript
const options = {
exclusions: [
'datastorage',
'deduplication',
'internalvars',
'privacy'
]
};
await wrapper.reloadContainer(siteId, containerId, options);
`
Please see the container's documentation for other options.


#### On Route Change
Utilize the trackPageLoad function for updating on route changes.
- Vue 3 with Composition API:
`js

`
- Vue 2:
`js

`



Server-side Rendering (SSR)

vue-tag-commander works seamlessly with frameworks utilizing Server-side Rendering (SSR) (for example Nuxt / Nuxt 2).
However, the wrapper is interacting with the DOM objects document and window, which are not available on the server.
Therefore, you have to make sure that wrapper methods are only executed on the client-side.
This can be achieved by using hooks like onMounted (mounted() for Vue 2) or executing it in a callback function that doesn't run on the server.

$3


`js
// Don't do it like that, code is executed on the server

`

`js
// Works as the code is executed on the client only

`

Other options are checking whether window is defined, or checking the process before executing a method.
`js

`

`js

`

$3

- When using Nuxt 2, you have to add vue-tag-commander to the transpile array in the build options in nuxt.config.js in order to make it work:
`js
export default {
// ...
build: {
transpile: [
'vue-tag-commander'
]
}
// ...
}
`

Example usage:
`js
// Don't do it like that, code is executed on the server

`

`js
// Works as the code is executed on the client only

`

Other options are checking whether window is defined, or checking the process before executing a method.
`js

`

`js

`

Sample App

To help you with your implementation we provide two sample applications, one for Vue 3, one for Vue 2. To run them, clone the repo then run:
- For the Vue 3 Sample App
`bash
cd tag-commander-sample-app-vue3
npm install
npm run dev
`
- For the Vue 2 Sample App
`bash
cd tag-commander-sample-app-vue2
npm install
npm run dev
`

Then, visit http://localhost:5173.

Development

After forking, set up your environment:

`bash
npm install
`

Commands available:

`bash
gulp
``

Contribute

To contribute to this project, please read the CONTRIBUTE.md file.

License

This module uses the MIT License. Contributions are welcome.