How to create custom events in HUB

Introduction

Learn how custom events work in the Icomm Notifications HUB and how they can be used to filter users in push campaign sends.

What are custom events?

Custom events are milestones that occur on the customer page, they can be events per se (a user clicked a button/add a product to the cart) or milestones that do not necessarily correspond to a particular action (the user stayed more than 1 minute on the same page).

How are custom events sent to the Notifications HUB?

Custom events must be explicitly sent by each client, as the HUB has no way of knowing about them.

To do this, they must use the function provided in the SDK that is installed with the traditional Hub script on all pages:

wpn('event', 'EVENT NAME');

Where <<EVENT NAME>> will be the name you want to give the event. It must be a word and can contain only letters and numbers.

How to implement the custom event?

The custom event can be implemented in any way the client wishes. Here are some examples:

Direct insertion in the code (link)
Insertion through javascript
Insertion from GTM

For all these cases, we assume that the event we want to send is 'test event'.

Direct insertion in the code (link)

It is perhaps the most direct and visualized method for a programmer or anyone with access to the code. The code should be added in an <a> link as shown below.

<a href=”#” onclick=”wpn(‘event’, ‘test event’);”>Click to send event</a>

Javascript embed

This case makes it possible to modify the operation of a site that is already running, without having to change its structure. Suppose we have the following link:

<a href=”/see-offers” id=”link-offers”>See offers</a>

In this case, the following JS code can be added to the site without modifying the existing structure

let link = document.getElementById("offers-link");

link.addEventListener('click', () => {wpn('event', 'test event');}, {once:true});

</script>

Insertion from GTM

This case is presented as an option to implement events that do not require programmer intervention (some help may be needed to identify the link/button to be tracked).

Suppose we have the same HTML structure as the previous case:

<a href=”/see-offers” id=”link-offers”>See offers</a>

In this case, you must do the following:

Identify the link/button on which you want to trigger the event
Create the corresponding trigger in GTM
Create the tag and associate it to the trigger from step 2

Identify the link/button on which you want to trigger the event

In our case, we have the link that is identified by its ID (it should be unique throughout the HTML). For the example then we want the link whose id=”link-offers”

Create the corresponding trigger in GTM

Enter triggers, in the right menu

Enter the New/Nuevo button at the top right

Give it a name (in our example “Test Event Trigger”) and press the pencil that appears when hovering over the central area of the screen shown below.

Select the event you want to track to trigger the custom event. In our example Click (can be “All elements” or “Just links” in this case)

Configure the trigger so that it fires only when the button we want is clicked, configuring: “some clicks” and in the HTML ID equals drop-down “enlace-offers” (this works for our HTML as seen in step 1, it may be necessary to apply another particular filter for each link/event you want to trigger).

The following shows how the trigger should be configured:

Press “Save” and save the trigger

Create the corresponding tag in GTM

Enter tags in the right menu.

Press New/Nuevo to configure the tag of the event that we want to trigger.

Give it a name (in our example “Test Event Tag”) and press the pencil that appears when hovering over the first card in the central area of the screen shown below.

In that section, choose Custom HTML.

Complete with the code of the event that you want to trigger, as shown below.

Then go to the second card and press the pencil. Select the trigger that we created in the previous step.

Once selected, save the tag.

It can be tested using the built-in GTM functionality and then published (without publishing, the tag will not be active and therefore no events will be generated).

How to use custom events to segment in the Notifications HUB?

Enter the HUB and go to the Behaviorial Audience section in the Web Push module. On this screen, press the Create Audience button to generate a new behavior based on the event that we previously sent.

Create the event assigning it a name (with which it will later be identified within the HUB) and select the options to include, custom event equal to "test event" (in this case, you must replace it with the <<EVENT NAME>> that is required ) in the last N days (we suggest using between 7 and 20 days).

Once the data is complete, save the event, and go to the push campaigns section.

Select the created event.

You can select more than one event and the campaign will be sent to all subscribers who meet at least one of the selected behaviors.

If you want to establish a filter to segment users who have carried out more than one event, you can create it from behaviors (applying more than one rule).

Note: Behavior analysis is computationally expensive. If it is used for bomb/lightning campaigns, keep in mind that it may take time to be sent (depending on several factors such as the number of campaigns being sent simultaneously, complexity of behavior, etc).

Updated on: 05/29/2023

Was this article helpful?

Thank you!