User data from forms

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>

User data from forms

How to use this snippet

Mapping Attributes

Comments