Setting the identity with Javascript

A fundamental part of Triggerbee is the Identity Layer. By identifying visitors you are able to create 1-to-1 communication and create very specific segments for targeting Onsite Campaigns. This article will take you through how to set the identity of a visitor using JavaScript, as well as passing other identity type data, such as name or telephone number.

As read in this article about identifying visitors, identification of your visitors can be done in several ways. If you have existing forms on your websites, such as a contact form, login, or checkout - it can be scripted to log the submitted data to Triggerbee. Depending on the desired outcome, scripting can be composed to identify the visitors' contact details, what action they performed, and/or where they are on the website.

Basic identification script

The identification script will collect the current Triggerbee user object, add the new identification data, and finally submit the data to Triggerbee via a goal. Only the adding of data and the log submission have to be customized. 

Identify Visitor

triggerbee.identify({
    email: 'someone@triggerbee.com',
    firstname: 'Some',
    lastname: 'One'
}, function() {
   console.log('Logging done!');
});

Purchase Event

triggerbee.event({
   type: 'purchase',
   id: 123, // Could be Order ID
   data: {
      couponCode: 'welcome15',
      revenue: 1500,
      identity: {
          email: 'someone@triggerbee.com',
          firstname: 'Some',
          lastname: 'One'
      }
   }
});

Goal and Identify

triggerbee.event({ 
   type: 'goal', 
   name: 'Logged in', 
   data: { 
       identity: { 
          email: 'someone@triggerbee.com' 
        } 
   } 
});

Script examples

Adding identification from a login form

A simple example of how to pick up data from a form and log the collected email to Triggerbee.

var form = document.querySelector('.login-form'); 
form.addEventListener('submit', function () 
{ 
     triggerbee.event({ type: 'goal', 
     name: 'Logged in',
     identity: {  
        data: { 
            email: document.querySelector('input[type="Email"]').value,
            firstname: document.querySelector('input[id="FirstName"]').value, 
            lastname: document.querySelector('input[id="LastName"]').value 
             } 
        }
     }); 
});

Adding identification on account creation

Apart from logging the email of the user (which is the unique identifier in Triggerbee), you can also add other data to the user - such as name, phone number, gender, etc. Any data you like! Simply build your user object like this:

var form = document.querySelector('.account-creation-form');
form.addEventListener('submit', function () {
    triggerbee.identify({
        email: document.querySelector('input[type="Email"]').value,
        firstname: document.querySelector('input[id="FirstName"]').value,
        lastname: document.querySelector('input[id="LastName"]').value,
        phone: document.querySelector('input[id="Phone"]').value
    });
    triggerbee.event({
       type: 'goal',
       name: 'Created account',
           identity: {
                data: {
                   email: document.querySelector('input[type="Email"]').value
                }
            }
    });
});

Adding identification on completed purchase

When logging purchases, or any goal that contains revenue, you can also add this to the goal.

if (window.location.pathname=="/checkout/thankyou"){
    triggerbee.event({
        type: 'purchase',
        id: 123, // Use appropriate order ID or similar
        identity: {
            couponCode: document.querySelector('input[id="CouponCode"]').value,
            revenue: parseInt(document.querySelector('input[id="TotalValue"]').value),
            data: {
                email: document.querySelector('input[id="Email"]').value,
                firstname: document.querySelector('input[id="FirstName"]').value,
                lastname: document.querySelector('input[id="LastName"]').value
            }
        }
    });
}

Log other form data

In the same basic script as above, it is also possible to add other custom data which you collect from forms on your site. Simply add any parameter you wish to add and Triggerbee will automatically create a corresponding data field on the profile. This is an example from a signup page:

signupForm.addEventListener("submit", function () {
    triggerbee.identify({
        email: document.querySelector('input[type="Email"]').value,
        firstname: document.querySelector('input[id="FirstName"]').value,
        lastname: document.querySelector('input[id="LastName"]').value,
        age: document.querySelector('input[id="Age"]').value,
        gender: document.querySelector('input[id="Gender"]').value,
        favoriteShop: document.querySelector('input[id="FavoriteShop"]').value
    });
    triggerbee.event({
        type: 'goal',
        name: 'Created Account',
        identity: {
          data: {
            email: document.querySelector('input[type="Email"]').value
          }
        }
    });
});

Creating a visitor Object in the browser

Apart from adding events and identification to the visitor, you can also add a visitor object to the browser in order to target current settings for that particular visitor and/or session - such as logged-in status or page type.

Example script:

var triggerbeeCurrentVisitor = {
    name: "Anna",
    isLoggedin: true,
    memberType: "Premium"
};

This will allow you to target campaigns on those attributes, like targeting only logged-in visitors or visitors on specific page types.