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

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

SR.event.trackCustomEvent(
    "entries.count", 
    {
        "eventLabel": "entriesCount",
        "lat": "50.0937",
        "lon": "18.5429",
        "object": "Shopping center",
        "shopId": "S198",
        "shopName": "Chicago",
        "zipCode": "60639",
        "street": "W North Ave",
        "time": 1556474400000,
        "entries": 27,
    },
    "Entries count"
)

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)

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:

1. 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.
2. If Double Opt-in is enabled in newsletter settings, an automatically generated email with an activation link is sent to the customer.
3. 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 the newsletter_agreement_enabled event attribute being set to enabled. 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:
    1. sets the newsletterAgreement attribute in the customer profile to enabled.
    2. sends another email informing that the subscription request was confirmed.
  • 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.
• 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.