Using Optify on Drupal Webforms

NOTE: Optify has been sold and terminates it's Optify SaaS product on October 31, 2013.

On the Optify site it details the different ways you can set up lead tracking on your forms. If you are using the Drupal Webforms module to create your forms then things get a little trickier. The Optify site has examples on ways to manually 'instrument' your forms - ie. dynamically apply the Optify code to your forms. In this post I delve into using the javascript method to get your Drupal Webforms submitting data to Optify.

The two main issues we are going to tackle are:
 1) Instrumenting the Optify code
 2) Mapping your Webform form fields to Optify's accepted field names

I'm not going to rewrite the Optify guide about adding dynamic ajax tracking so check that out first to understand what we are trying to achieve.

Below is the combination of jQuery & Optify code I've used to instrument my webforms. As some pages may contain multiple forms, with varying fields, it dynamically instruments each one.

<script type="text/javascript">
  // optify code  
  var _opt = _opt || [];
  _opt.push([ 'view', 'XXXXXXXX' ]);
 (function() {
    var scr = document.createElement('script'); scr.type = 'text/javascript'; scr.async = true;
    scr.src = '//service.optify.net/opt-v2.js';
    var other = document.getElementsByTagName('script')[0]; other.parentNode.insertBefore(scr, other);
 })();
</script>

<script type="text/javascript">
// Optify code to instrument the webforms
var ids = new Array();
$('form.webform-client-form').each(function() {
  _opt.push(['instrument', $(this).attr("id")]);  
  var formId = $(this).attr("id");
 
  $(this).submit(function() {

   _opt.modifyFormParameters = function(parameters){
   
    // Use fields 'name' attribute to get the fields ID value
    // It's done this way because the fields 'name' attribute  is the same on all forms, but the ID values can change
    var idFirstName = $('#'+formId+' [name="submitted[first_name]"]').attr('id');
    var idLastName = $('#'+formId+' [name="submitted[last_name]"]').attr("id");
    var idTitle = $('#'+formId+' [name="submitted[job_title]"]').attr("id");
    var idCompany = $('#'+formId+' [name="submitted[company]"]').attr("id");
    var idTelephone = $('#'+formId+' [name="submitted[telephone]"]').attr("id");
    var idEmail = $('#'+formId+' [name="submitted[email_address]"]').attr("id");
   
    // Map field id's to the acceptable Optify names in order to pass the field values
    // Check not null otherwise it will break the optify submission
    if (idFirstName) {
     parameters["first_name"] = document.getElementById(idFirstName).value;
    }
    if (idLastName) {
     parameters["last_name"] = document.getElementById(idLastName).value;
    }
    if (idTitle) {
     parameters["title"] = document.getElementById(idTitle).value;
    }
    if (idCompany) {
     parameters["company"] = document.getElementById(idCompany).value;
    }
    if (idTelephone) {
     parameters["telephone"] = document.getElementById(idTelephone).value;
    }
    if (idEmail) {
     parameters["email"] = document.getElementById(idEmail).value;
    }
   
    return parameters;
   }
  
   // Submit the form to Optify by form id
   _opt.push(['submit', formId]);
  
   // These lines help ensure that the form is submitted to Optify.
   _opt.the_form = this;
   setTimeout(function(){ _opt.the_form.submit(); } , 1000); 
   return false;

  });
});
</script>

Breaking it down

Part 1

The first part is just the standard Optify code.

<script type="text/javascript">
   // optify code 
   var _opt = _opt || [];
   opt.push([ 'view', 'XXXXXXXX' ]);
   (function() {
      var scr = document.createElement('script'); scr.type = 'text/javascript'; scr.async = true;
      scr.src = '//service.optify.net/opt-v2.js';
      var other = document.getElementsByTagName('script')[0]; other.parentNode.insertBefore(scr, other);
   })();
</script>

Part 2

This picks up each webform on a page, gets their ID and instruments them with the Optify code. 

// Optify code to instrument the webforms
	var ids = new Array();
	$('form.webform-client-form').each(function() {
	  _opt.push(['instrument', $(this).attr("id")]);

Part 3

This maps the Webform fields to the Optify accepted names. It's excecuted on form submission, and ensures the fields being submitted exist and aren't returning null.
You will need to check that Webform field names correspond with your field names, eg. [name="submitted[first_name], and that all the ones you are trying to track are accounted for.

$(this).submit(function() {

   _opt.modifyFormParameters = function(parameters){
   
    // Use fields 'name' attribute to get the fields ID value
    // It's done this way because the fields 'name' attribute  is the same on all forms, but the ID values can change
    var idFirstName = $('#'+formId+' [name="submitted[first_name]"]').attr('id');
    var idLastName = $('#'+formId+' [name="submitted[last_name]"]').attr("id");
    var idTitle = $('#'+formId+' [name="submitted[job_title]"]').attr("id");
    var idCompany = $('#'+formId+' [name="submitted[company]"]').attr("id");
    var idTelephone = $('#'+formId+' [name="submitted[telephone]"]').attr("id");
    var idEmail = $('#'+formId+' [name="submitted[email_address]"]').attr("id");
   
    // Map field id's to the acceptable Optify names in order to pass the field values
    // Check not null otherwise it will break the optify submission
    if (idFirstName) {
     parameters["first_name"] = document.getElementById(idFirstName).value;
    }
    if (idLastName) {
     parameters["last_name"] = document.getElementById(idLastName).value;
    }
    if (idTitle) {
     parameters["title"] = document.getElementById(idTitle).value;
    }
    if (idCompany) {
     parameters["company"] = document.getElementById(idCompany).value;
    }
    if (idTelephone) {
     parameters["telephone"] = document.getElementById(idTelephone).value;
    }
    if (idEmail) {
     parameters["email"] = document.getElementById(idEmail).value;
    }
   
    return parameters;
}

Part 4

This is just more of the standard Optify code taken from their site.

   // Submit the form to Optify by form id
   _opt.push(['submit', formId]);
  
   // These lines help ensure that the form is submitted to Optify.
   _opt.the_form = this;
   setTimeout(function(){ _opt.the_form.submit(); } , 1000); 
   return false;

 

Justin Chevallier

Justin Chevallier

Avid Drupal site builder & user for +9 years.

Comments

Submitted by vicky on

There are different ways to set up the leading tracks in the drupal webforms. Optify site is one such example of this. They are very much accurate and reliable form of developing the tracks in the drupal sites.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.