Event tracking
Everything your customers do is recorded in the system. What pages they’ve opened, where they came from, and what they saw next. You will know when they hovered over a banner for a longer time than usual and when they clicked that banner. You can know when they logged in to your mobile application and what parts of that application they’ve clicked or interacted with - all events are monitored in real time. In addition to what is gathered automatically, you can declare many different types of events and gather as much data as you need by tagging fields in your web forms.
All events have at least the following:
- action - indicates the action type, in the form
context.activity
, so, for example,page.visit
means that a page has been visited - label - human-readable information about the activity, such as a page title
- time - the time when the event occurred
- uuid - a reference to the customer that generated the activity
- params - any parameter that may be required (depends on the activity context, for example, the url of the page for a
page.visit
)
Authentication
Requests to the SDK may require customer authentication. For more details, see this article.
Automatically tracked activities
All page view events on your website are tracked automatically, unless configured otherwise (see installation and configuration). The same applies to events related to the customer session.
Each time a page is refreshed, the tracking code is initiated. At this moment, a page.visit
event is generated, providing information about the page visited by the customer.
List of automatically tracked activities
Action | Activity Tracked | Label |
---|---|---|
page.visit | All page views of your tracked domain | Visited page {{page title}} |
session.start | Information about a customer starting a session | Started session |
session.end | Information about a customer ending a session | Session end |
Declarative tracking (custom events)
Aside from automatically tracked activities, you can also create custom events that record customer actions.
This could be the tracking of all product views, screen views, sign-up button clicks, call-center contacts, or anything else you may want.
Example:
|
|
The method takes three arguments:
- The name of the action. (line 2)
- An object that contains optional event parameters (lines 3-14)
- The label of the event. It is displayed in the customer’s activity feed. (line 15)
- The custom action name must follow the
context.action
convention. For example:screen.view
,product.buy
,social.share
- The name must be up to 32 characters long and must match the following regular expression:
^[a-zA-Z0-9\.\-_]+$
Tracking form data
Introduction
If you have embedded our Tracking Code in your website, you will see anonymous customers in the Synerise Dashboard.
In this section, you will learn how to track forms on your website. Capturing forms is crucial, as the data used there automatically updates an anonymous customer’s information and turns them into a known contact.
You probably have several types of forms on your page, such as a login, contact, or registration form, or one for leaving comments. This provides a variety of data, from a customer’s first name to their comment about a product or your business. Synerise needs to know what type of data is sent in each input, so it can update the customer’s personal data properly.
When the data is sent, a customer is no longer anonymous in Synerise.
Sending form data to Synerise with a tracking code
To send data from a form to Synerise, the form’s fields must have the data-synerise
attributes added to them.
Example:
<form action="" method="post" data-synerise="contact">
<input type="text" name="email" data-synerise="email" placeholder="Email" value="john.doe@synerise.com" />
<input type="text" name="name" data-synerise="firstname" placeholder="Name" value="John" />
<input type="text" name="surname" data-synerise="lastname" placeholder="Surname" value="Doe" />
<input type="hidden" name="something" value="some hidden value" />
<input type="submit" value="Save" />
</form>
When the form above is sent, the following call to the SDK is made:
SyneriseTC.sendFormData('contact', //form type
{ //form data
surname: "Doe",
name: "John",
email: "john.doe@synerise.com"
},
{ //field mapping
lastname: "surname",
firstname: "name",
email: "email"
},
[], //skip as attributes
function () {} //callback function
)
The method takes five arguments:
- Form type: string. You can enter several values, separated by commas, like this:
'string1,string2,string3'
(no spaces).
This information is stored as tags in the customer’s card in CRM. - Form data: object, HTML form field values. These are the collected values that are sent to Synerise and potentially stored as customer information in the customer card in CRM, depending on the mapping.
- Field mapping: object. This object provides the mapping between the
name
attributes of your HTML form fields and the predefined fields of the customer object in the Synerise system. - Skip as attributes: array. Values from the fields in this array will be included in the
attributes
section of a customer. You can include custom attributes here. - Callback function, function. This function is called after sending the form.
Calling the SDK directly
If you use the SDK method directly, you do not need to include the mapping object. You can refer to the fields directly by their Synerise names:
SyneriseTC.sendFormData('contact', {
lastname: "Doe",
firstname: "John",
email: "john.doe@synerise.com"
})
Delayed data forms
If an HTML form with data-synerise
attributes appears after the tracking code has been initialized (for example, in a pop-up window), you have to explicitly initialize another search for the attributes on the page, using the following SDK method:
SyneriseTC.initFormCatch()
Newsletter agreements
There are two ways to include newsletter agreements in a data form.
Method 1: sending newsletter agreements as the form’s attribute
Add a data-synerise="newsletter"
attribute to the form
tag:
<form action="" method="post" data-synerise="newsletter">
<!-- body of the form -->
</form>
Sending the form triggers the following SDK call:
SyneriseTC.sendFormData('newsletter', {})
This information is processed in the following way:
- The customer’s email is added to the database, without any agreement defined. Marketing emails cannot be sent. If Double Opt-In is disabled, nothing more happens, but the email can be used for automations.
- If Double Opt-in is enabled in newsletter settings, an automatically generated email with an activation link is sent to the customer.
- When the customer clicks the link in the activation email, their marketing agreements are enabled and marketing emails can be sent.
Method 2: setting newsletter agreements by using a checkbox in the form
Use the data-synerise="newsletterAgreement"
attribute on a checkbox.
When this attribute is used, you must also set a data-synerise-value
attribute with one of the following values:
enabled
: the customer agrees to receive newsletters and marketing agreements are enabled for them.Important:
This does not automatically enable any agreements. You must create an automation triggered by thenewsletter_agreement_enabled
event attribute being set toenabled
. The automation depends on the opt-in configuration:- If double opt-in is enabled, your automation must send a confirmation request email to the customer. Clicking the link in the confirmation email sends an event which triggers another automation which:
- sets the
newsletterAgreement
attribute in the customer profile toenabled
. - sends another email informing that the subscription request was confirmed.
- sets the
- If single opt-in is enabled, the automation must send an email to the customer with an information that they were subscribed to the newsletter and an option to unsubscribe.
- If double opt-in is enabled, your automation must send a confirmation request email to the customer. Clicking the link in the confirmation email sends an event which triggers another automation which:
confirmation
: when Double Opt-In is enabled in newsletter settings, use this value to indicate an agreement that the customer must confirm by clicking the link in an activation email.disabled
: the customer does not agree to receive newsletters. If an agreement was enabled before, it becomes disabled.
Example:
<form action="" method="post" data-synerise="contact">
<input type="text" name="email" data-synerise="email" placeholder="Email" value="john.doe@synerise.com" />
<label>
<input type="checkbox" name="checkbox" value="value" data-synerise="newsletterAgreement" data-synerise-value="enabled">
I consent to the processing of my email address by xxxx in order to send me a newsletter with xxxx offers.
</label>
<input type="submit" value="Save" />
</form>
The following SDK call is triggered:
SyneriseTC.sendFormData('contact', {
email: 'john.doe@synerise.com',
newsletterAgreement: 'enabled' //translates to "newsletter_agreement_enabled: 'enabled'" for the backend
})
Allowlisting and blocklisting of specific events
You should also revise and define event blocklists and allowlists according to your organization’s needs and regulations.
Those lists can be defined per site as described in this article.