Rich-text Reply

Loading external JavaScript (SumoMe)

dualreality 06-10-15
Accepted Solution

Loading external JavaScript (SumoMe)

Hello,

 

I'm trying to load an external javascript to use in one of my page variation experiments.

 

The Optimizely documentation advises me to utilize this code:

 

 

/*
 * Usage
 *    This function will append an external JavaScript to the head of the document.
 *
 *  @param {String} location - The location of the file you'd like to load.
 *  @param {Function} callback - [OPTIONAL] A function to call when the script has completed downloading.
 *
 */

 var loadScript = function(location, callback){
   var fileRef = document.createElement('script');
   fileRef.setAttribute('type','text/javascript');

   if (callback) {
     if (fileRef.readyState) {  // IE
       fileRef.onreadystatechange = function() {
         if (fileRef.readyState == 'loaded' || fileRef.readyState == 'complete') {
           fileRef.onreadystatechange = null;
           callback();
         }
       }; 
     } else {  // Non-IE
       fileRef.onload = function(){
         callback();
       };
     }
   } 

   fileRef.setAttribute('src', location);
   document.head.appendChild(fileRef);
 };

 loadScript('HTTP://SCRIPT.URI/EXAMPLE.JS', function() {
   // CALLBACK - code that does something with the data returned by loading the script
 });

However, the script I'm trying to load requires a few more variables.

 

 

<script src="//load.sumome.com/" data-sumo-site-id="356554a8c9623d4062cc4f01730f19f6a5a032770a67b174cfd3250b0186c59d" async="async"></script>

Note the data-sumo-site-id and async.

 

I do not have the sufficient javascript knowledge to make this work.

 

Can anyone offer a solution?

 

Many thanks

tomfuertes 06-10-15
 

Re: Loading external JavaScript (SumoMe)

[ Edited ]

You can add any extra attributes (specifically those) similar to how they set the src file ~29 ala:

 

fileRef.setAttribute('data-sumo-site-id', '356554a8c9623d4062cc4f01730f19f6a5a032770a67b174cfd3250b0186c59d');

fileRef.async = true

 

So the full code would be:

 

/*
 * Usage
 *    This function will append an external JavaScript to the head of the document.
 *
 *  @param {String} location - The location of the file you'd like to load.
 *  @param {Function} callback - [OPTIONAL] A function to call when the script has completed downloading.
 *
 */

 var loadScript = function(location, callback){
   var fileRef = document.createElement('script');
   fileRef.setAttribute('type','text/javascript');

   if (callback) {
     if (fileRef.readyState) {  // IE
       fileRef.onreadystatechange = function() {
         if (fileRef.readyState == 'loaded' || fileRef.readyState == 'complete') {
           fileRef.onreadystatechange = null;
           callback();
         }
       }; 
     } else {  // Non-IE
       fileRef.onload = function(){
         callback();
       };
     }
   }

   fileRef.setAttribute('src', location);
   fileRef.setAttribute('data-sumo-site-id', '356554a8c9623d4062cc4f01730f19f6a5a032770a67b174cfd3250b0186c59d');
   fileRef.async = true;
   document.head.appendChild(fileRef);
 };

 loadScript('HTTP://SCRIPT.URI/EXAMPLE.JS', function() {
   // CALLBACK - code that does something with the data returned by loading the script
 });
____
- Tom Fuertes | CTO @ CROmetrics / LinkedIn
"Most Impactful Use of Personalization" and "Experience of the Year" Optie award winner.


dualreality 06-10-15
 

Re: Loading external JavaScript (SumoMe)

That's fab. Thanks so much.
jaschaio 06-03-16
 

Re: Loading external JavaScript (SumoMe)

[ Edited ]

I tried that code but get an error with sumome Smiley Sad

 

Failed to load resource: the server responded with a status of 502 (Bad Gateway)

 

 

Level 1