TrackMe

Easily push events to Google Tag Manager for both GA4 and UA properties.

Installation

First of all, you must allow your project to download the package.

To do so, make sure you have a .npmrc file (at the same level as the package.json file) containing the following code:

//registry.npmjs.org/:_authToken=${NPM_TOKEN}

Replace ${NPM_TOKEN} by the token you will find in Zoho behind NPM - Clé installation package.

Then, add the package to your project:

$ yarn add @quatrecentquatre/track-me

Usage

First, make sure to compile the dist/track-me.min.js file with your task runner.

Then, you're already good to go and push your first event!

Pushing events automatically on click

TrackMe listens to all DOM elements with the me:track:click attribute.

Each element with that attribute must have a me:track:data attribute and accepts an optional me:track:ua-data attribute.

me:track:data will contain the data for GA4 property whereas me:track:ua-data will contain the data for UA property if you have to track events in UA property too.

me:track:data must contain a JSON object which looks like the following:

{
    "event": "<event_name>",
    "<additonal_param_1>": "<additional_param_1_value>",
    "<additonal_param_2>": "<additional_param_2_value>"
}

event is required and you can pass any additional parameters if you have too.

me:track:ua-data must contain a JSON object which looks like the following:

{
    "event": "<event_name>",
    "action": "<action>",
    "category": "<category>",
    "label": "<label>",
    "value": "<value>",
}

action is required whereas event, category, label and value are optional.

By default, event will be set to TrackMe.

Here is an example:

<a href="#"
    me:track:click
    me:track:data='{"event": "apply", "position": "developer", "location": "toronto"}'
    me:track:ua-data='{"action": "apply", "category": "developer", "label": "toronto"}'
>Apply</a>

Pushing events manually

In your JS files you can push events manually by using the following code:

Me.track.pushEvent(ga4Data, uaData);

ga4Data is required whereas uaData is optional if you do not have to track events in UA property too.

The data structure for both parameters is the same as the one used for events pushed automatically (see JSON above).

Here is an example:

const ga4data = {
    event: "apply",
    position: "developer",
    location: "toronto",
}
const uaData = {
    action: "apply",
    category: "developer",
    label: "toronto",
}
Me.track.pushEvent(ga4Data, uaData);

Setting up GTM

For GA4 tracking, you'll have to create a trigger using the event name pushed and a tag based on the pushed data.

For UA tracking, you'll have to create a trigger using "TrackMe" as the event name (or the one you'll use if not using the default one) and a tag based on the pushed data.

TrackMe functions

Add new click events to track

In case you need to add DOM and that DOM has a me:track:click attribute in it, you'll need to call a function to add click event listeners.

Right after you append new DOM, simply call the addEvents() function of Me.track. You must pass the targeted DOM element for which you want to add events.

Me.track.addEvents($newContent);

Remove tracking of click events

In case you need to remove DOM and that DOM has a me:track:click attribute in it, you'll need to call a function to remove click event listeners.

Right before you remove DOM, simply call the removeEvents() function of Me.track. You must pass the targeted DOM element for which you want to remove events.

Me.track.removeEvents($contentToDelete);