Question

Ok, here goes my first question on here.

Setup: We use a javascript based tool to A/B test our landing page designs. I need version A (control) to link to one external javascript file, and version B (variation) to link to an alternate javascript file.

Goal: to have an internal js script at the bottom of the control that looks to see if the tool is in fact serving A or B, and if true, which one was served. The result indicates which external script should be linked.

Issue: regardless of if the tool is in fact serving A or B, the original script is linked first, then if the tool is detected, the appropriate script is linked after that.

Here is my code (I apologize in advance for any newbie mistakes):

//script at bottom of original or tool-served control html page template
<script type="text/javascript">
valForTool = function () {
  var variationId = _tool_exp[_tool_exp_ids[0]].combination_chosen;
  if (variationId == 1) {
     var newScript = document.createElement('script');
     newScript.type = 'text/javascript';
     newScript.src = 'js/scripts.js';
     document.body.appendChild(newScript);
   };
}
originalValidation = function () {
  var newScript = document.createElement('script');
   newScript.type = 'text/javascript';
   newScript.src = 'js/scripts.js';
   document.body.appendChild(newScript);
}
$(function(){
  if (typeof _tool_exp_ids !== 'undefined' && typeof _tool_exp_ids[0] !== 'undefined') {
     valForTool();
  }  else {   
     originalValidation();
  };   
});
</script>
//end script on control or original template  

//script on tool-served variation html template - will run after the above script
<script type="text/javascript"> 
$(function() {
     $('#project_info input[type=submit]').removeAttr('disabled');
     $('#project_info').unbind();
     var newScript = document.createElement('script');
     newScript.type = 'text/javascript';
     newScript.src = 'js/scripts2.js';
     document.body.appendChild(newScript);  
     $('.input_text').parent().addClass('contact_field');
 });
</script>
// end script on variation template

Any ideas as to what I’m doing wrong? Did I provide enough information? Thanks! I love this site as a reference for my questions, but this is my first time actually posting one.

Answer 1

Shortening it down a bit, it seems like your just doing this:

<script type="text/javascript">
$(function(){
   if (typeof _tool_exp_ids !== 'undefined' && typeof _tool_exp_ids[0] !== 'undefined') {
      var variationId = _tool_exp[_tool_exp_ids[0]].combination_chosen;
      if (variationId == 1) {
          $.getScript('js/scripts.js', function() {runSecond();});
      }
   }else{   
          $.getScript('js/scripts.js', function() {runSecond();});
   }

   function runSecond() {
      $('#project_info input[type=submit]').removeAttr('disabled').unbind();
      $.getScript('js/scripts2.js');
      $('.input_text').parent().addClass('contact_field');
   }
});
</script>

Now looking at that, it’s obvious that both scripts are running no matter what conditions are met in those if/else statements, and I don’t really get what it is your trying to do, but the first thing i would do, is to add some console.logs to see if those if/else statements are working like they are supposed to, and then figure what scripts should be loaded under which conditions etc ?