This sample HTML snippet shows how to pick user attributes from a form being submitted and send those attributes back to Blueshift as an event.
This example demonstrates a basic unsubscribe form and creates an "identify" event to update the "unsubscribed" attribute of a user. This script can collect any form attribute and can be used to create any kind of event.
How to use this snippet
- Replace
EVENT_API_KEY
with your event api key. ( skip this step if blueshift.js is already loaded ) - Select your form via a css selector ( eg
$("#bsftForm")
) - Update the
keyMapping
to map the names of your form inputs you want to capture with the corresponding attribute in Blueshift.
Mapping Attributes
Problem: Sometimes the same piece of data is called different names in different systems.
Example: The form below has an input named "does_not_accept_offers", which is represented as "unsubscribed" in Blueshift.
Solution: To solve this discrepancy, the script used the keyMapping
to translate "does_not_accept_offers" into "unsubscribed" when the event is created.
var keyMapping = {
'email': 'email',
'does_not_accept_offers': 'unsubscribed',
}
** Note even though "email" is called "email" in both systems, it is including in the keyMapping
as well to signify that it is an attribute to send along. The form tracking script only pays attention to attributes that are in the keyMapping
.
- Sample unsubscribe.html
<form action="" method="post" id="bsftForm">
<label for="email">
Email:
<input type="email" name="email">
</label>
<br><br>
<label for="does_not_accept_offers">
Unsubscribe:
<select name="does_not_accept_offers" id="">
<option value="true">Remove me from future emails</option>
<option value="false">Keep sending me emails</option>
</select>
</label>
<br><br>
<input type="submit" value="Submit">
</form>
<script>
// get blueshift
window._blueshiftid='EVENT_API_KEY';window.blueshift=window.blueshift||[];if(blueshift.constructor===Array){blueshift.load=function(){var d=function(a){return function(){blueshift.push([a].concat(Array.prototype.slice.call(arguments,0)))}},e=["identify","track","click","pageload","capture","retarget"];for(var f=0;f<e.length;f++)blueshift[e[f]]=d(e[f])};}
blueshift.load();blueshift.retarget();blueshift.pageload();
if(blueshift.constructor===Array){(function(){var b=document.createElement("script");b.type="text/javascript",b.async=!0,b.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.getblueshift.com/blueshift.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);})()}
// get jQuery
if (typeof jQuery == 'undefined') {
function getJquery(success) {
var script = document.createElement('script');
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
var head = document.getElementsByTagName('head')[0],
done = false;
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
};
};
head.appendChild(script);
};
getJquery(trackForm);
} else {
trackForm();
};
// track form submit
var submitForm = false
function trackForm() {
var keyMapping = {
'email': 'email',
'does_not_accept_offers': 'unsubscribed',
}
$("#bsftForm").submit( function(event) {
var formData = $(this).serializeArray();
var params = {};
$(formData).each( function(index,input) {
if (keyMapping[input.name] && ( input.value || input.value === false )) {
params[keyMapping[input.name]] = input.value
}
});
if (params.email) {
blueshift.identify(params)
};
if ( $(this).attr('target') === "_blank" ) {
submitForm = true
} else {
setTimeout(function() {
submitForm = true
$(event.currentTarget).submit();
}, 100);
}
return submitForm
});
}
</script>
Comments
0 comments