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.

WARNING:

By default, tracking a form requires authentication and cannot be used by anonymous customers. To change this, modify the event authentication settings:

  1. Add form.submit and client.createOrUpdate to the list of events which do not require JWT authentication.
  2. Remove form.submit and client.createOrUpdate from the list of events which require JWT authentication.

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.

WARNING:
  • If you use the non-unique email feature, use customId instead of email. See non-unique email feature configuration.
  • The SDK does not validate the data. For example, if the customer makes an error in their identifier and sends the form, a new profile with that identifier is created. This may cause the event history of an anonymous customer to be merged into a recognized profile with an error in the identifier, even if the user re-sends the form again with the right identifier. To avoid this, validate the entered data before sending the form.

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:

WARNING:
  • If you use the non-unique email feature, use customId instead of email. See non-unique email feature configuration.
  • The SDK does not validate the data. For example, if the customer makes an error in their identifier and sends the form, a new profile with that identifier is created. This may cause the event history of an anonymous customer to be merged into a recognized profile with an error in the identifier, even if the user re-sends the form again with the right identifier. To avoid this, validate the entered data before sending the form.
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.

Marketing agreements

See Newsletter agreements.

😕

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

😉

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

Close modal icon Placeholder alt for modal to satisfy link checker