Sending form data with JS SDK

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.

The data is saved in a form.submit event. The event contains all data from the form.

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.

Sending data to Synerise with HTML form attributes

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="text" name="customParam2" data-synerise="customAttribute1" value="customValue2" />
    <input type="hidden" name="customParam2" data-synerise="customAttribute2" value="customValue2" />
    <input type="submit" value="Save" />
</form>

In the form tag, in the data-synerise attribute, you can send several values, separated by commas (data-synerise="value1,value2,value3"). The values will be saved in the event data as formType and as tags in the customer’s card in Profiles.

You can add additional attributes (see customAttribute in the example). They are saved to the attributes object in a customer’s profile.

When the form above is sent, the following call to the SDK is made automatically:

SR.event.sendFormData('contact',
    { //form data
        "surname": "Doe",
        "name": "John",
        "email": "john.doe@synerise.com",
        "customParam1": "customValue1",
        "customParam2": "customValue2"
    },
    { //field mapping
        "lastname": "surname",
        "firstname": "name",
        "email": "email",
        "customAttribute1": "customParam1",
        "customAttribute2": "customParam2"
    }
)

Explanation:

• 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 Profiles, 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.

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()

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:

SR.event.sendFormData('formType', {
    lastname: "Doe",
    firstname: "John",
    email: "john.doe@synerise.com",
    customAttribute: "customAttributeValue" // saved in the `attributes` object of a Profile
    // more attributes and custom attributes
})

You can replace formType with another value or a number of comma-separated values (no spaces). These values are saved as formType in the event and as tags in the customer’s Profile.

Sending multiple events

When calling the SDK directly, you may want to send more events with the form.submit event. To ensure that those additional events are saved after form.submit identifies the profile, use the then function.

For example, if you want to add a review.send event to the form.submit event:

SR.event.sendFormData('formType', {
    lastname: "Doe",
    firstname: "John",
    email: "john.doe@synerise.com",
}).then(function () {
    SR.event.trackCustomEvent("review.send",
        {
            "stars": 5
        });
});

Marketing agreements

See Newsletter agreements.

Recognizing already logged users

You can automatically recognize users who have logged in previously and their session is still active.

Requirements

ID of a currently logged-in user:

• if you use unique emails: email
• if you use non-unique emails: custom_identify

Methods

Execute the following methods in a given order:

1. Get IdentityHash - This method generates and saves automatically IdentityHash based on:
   • email (for unique emails),
   • custom_identify (for non-unique emails).
2. Calculate IdentityHash - This method calculates IdentityHash for any string.
3. Send form data - This method recognizes a user.

Responses

SR.client.getIdentityHash(): String //if there is no identity hash, an empty string is returned
SR.client.hashIdentity(email): Number

Example implementation

The following code snippet compares the data about the currently tracked user with an email of a logged user. It checks whether the user is unidentified in Synerise or if the logged account is different from the one associated with the provided email. If either condition is met, the code proceeds to send form data for a login event, including the captured email, along with any additional parameters as key-value pairs.

//capture logged user email
const email="john.doe@synerise.com"

//user logged but unidentified in Synerise or logged identified as different account
if(email && (SR.client.getIdentityHash()==='' || SR.client.getIdentityHash()!==SR.client.hashIdentity(email))){
    SR.event.sendFormData('login', {
        email: email
        //additional parameters as key-value pairs
    })
}