Setting the identity of a visitor

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 identity of a visitor using javascript, as well as passing other identity type data, such as name and 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 website, 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.

Script example:

var tbContact = window.mtr_custom || {};
tbContact.session = tbContact.session || {};
		
tbContact.session = { 
 name:"Erlich Bachman", 
 email:"[email protected]"
}; 
		
window.mtr_custom = tbContact;
mtr.goal("Logged in");

Setting identity from your form

To collect submitted form data, the Javascript consists of 5 main parts.

1

Declaration of variables. Start by declaring variables for each field of data you want to send to Triggerbee. You also need to set the name of the Goal that will be set when the form is submitted, i.e "Contact Form Submission".
You can read more about goals here.

var form = document.querySelector('.form');
var emailIdentifier ='input[type="email"]';
var goalName ='Contact Form submission';<br>
	

2

Add an event listener and listen for the submit event.

form.addEventListener('submit', function () {

});<br>
	

3

Storing existing data in a new object within the event listener. 

var tbContact = window.mtr_custom || {};
tbContact.session = tbContact.session || {};<br>
	

4

Collection of variable data. Within the event listener, collect the submitted data from your form variables and store them as a session variable.

var email = document.querySelector(emailIdentifier).value;
tbContact.session.email = email;<br>
	

5

Compile and send data to Triggerbee. Make sure Triggerbees tracker picks up the session data, and log the goal to Triggerbee.

window.mtr_custom = tbContact;		 
mtr.goal(goalName);<br>
	

Full Example

Here's an example of a full code snippet where the identity is being set on form submission, with all the above components. 

<script type="text/javascript">
	var form = document.querySelector('.form');
	var emailIdentifier = 'input[type="Email"]';
	var goalName = 'Contact Form Submission';
	
	form.addEventListener('submit', function () {		
		var tbContact = window.mtr_custom || {};
		tbContact.session = tbContact.session || {};
		
		tbContact.session.email = document.querySelector(emailIdentifier).value;	
		
		window.mtr_custom = tbContact;
		mtr.goal(goalName);
	});
</script>

Custom Fields

As default, Triggerbee can handle a number of contact fields, see below. If you want to add other fields, you can add them as Custom Fields in Triggerbee and populate them through Javascript too. This article will tell you how to do so.

Other Input fields

The example code above only covers text input. In some cases, other input fields, such as radio buttons, checkboxes, and dropdowns. Data from these types of fields can be sent to Triggerbee just like text fields. Depending on the number of custom input fields you have, the collection method will differ. For these examples, we assume that there is only one of each input type in the form.

• Dropdown with Shoesizes
  tbContact.session.shoesize = document.querySelector(".form-select").value;
• Radiobutton with Gender options
  tbContact.session.gender = document.querySelector(".form-multiple-input").value;