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.

Javascript Components

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('.myform');
var emailIdentifier ='input[type="email"]';
var NameIdentifier ='input[name="your-name"]';
var goalName ='Contact Form submission';
2
Add an event listener and listen for the submit event.
form.addEventListener('submit', function () {

});
3
Storing existing data in a new object within the event listener. 
var tbContact = window.mtr_custom || {};
tbContact.session = tbContact.session || {};
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;

var name = document.querySelector(NameIdentifier).value;
tbContact.session.name = name;
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);	

Full Example

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

<script type="text/javascript">
	var form = document.querySelector('.form');
	var emailIdentifier = 'input[type="Email"]';
	var NameIdentifier = 'input[name="Name"]';
	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;
		
		var name = document.querySelector(NameIdentifier).value;	
		tbContact.session.name = name;		
		
		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.

Contact information Default Js Variable
Email Yes mtr_custom.session.email
Name Yes mtr_custom.session.name
Organization Yes mtr_custom.session.organization
Telephone Yes mtr_custom.session.telephone
Title Yes mtr_custom.session.title
Username Yes mtr_custom.session.username
Gender No mtr_custom.session. gender 
Age No mtr_custom.session. age
Any custom variable No mtr_custom.session. my-own-variable

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;
Did this answer your question? Thanks for the feedback! Please reach out to [email protected] if there's anything you'd like to add. There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us