Implementing Client Code - The Embed Snippet

The Embed Snippet

Below is the snippet of HTML that you need to add to your website template. This needs to appear on every page of your website, ideally in the <HEAD> area. Don’t forget to include it on special areas of the site like in the checkout process and ‘logged in’ areas. This offers the greatest flexibility in how the triggering behavior works across your site. Also, if at some point in the future you adopt other ForeSee products, it greatly simplifies the process of deploying them, since the code already exists on all the pages.

If you are using a tag manager to manage JavaScript snippets on your site, you inject the below snippet just as you would other analytic tools such as Google Analytics or Adobe Omniture.

Below is an example of the ForeSee embed snippet. You will receive your specific snippet from your ForeSee client contact:

<script type="text/javascript">
    // Instructions: please embed this snippet directly into every page of your website template.
    // For optimal performance, this must be embedded directly into the template, not referenced
    // as an external file.

    // ForeSee Embed Script v2.00
    // DO NOT MODIFY BELOW THIS LINE *****************************************
    ;(function (g) {
      var d = document, am = d.createElement('script'), h = d.head || d.getElementsByTagName("head")[0], fsr = 'fsReady',
        aex = {
          "src": "[PUT YOUR URL HERE]",
          "type": "text/javascript",
          "async": "true",
          "data-vendor": "fs",
          "data-role": "gateway"
        };
      for (var attr in aex){am.setAttribute(attr, aex[attr]);}h.appendChild(am);g[fsr] = function () {var aT = '__' + fsr + '_stk__';g[aT] = g[aT] || [];g[aT].push(arguments);};
    })(window);
    // DO NOT MODIFY ABOVE THIS LINE *****************************************
</script>

Asynchronous Loading

The embed snippet has a couple of convenient characteristics. First and foremost, it is non-blocking (asynchronous), meaning that the browser does not wait to download the Foresee script. Instead, the browser continues retrieving the page and your other images and scripts while download the ForeSee files in the background. This is beneficial for site performance.

Payload Size

The ForeSee script that it loads is small – usually around ~19Kb compressed, depending on the customer. The ForeSee script that eventually is loaded is larger, although this is also an asynchronous request, having minimal impact on page load. All ForeSee resources that are loaded also provide GZip compression when supported by the browser. This results in lower overall payload size – which is particularly important for mobile or on dial-up connections.

Caching

ForeSee resources also use very aggressive caching – both in the browser and on the server. We attempt to minimize redundant requests against the Content Delivery Network (CDN) to maximize page load performance in all situations. Read this article for more specifics on our cache behaviour.

Browser Support

The ForeSee gateway script is built on top of an industry-standard AMD module loading utility, and has undergone browser testing across a wide array of browsers and devices. Our supported browser set for the embed snippet and gateway script can be found on the Supported Platforms page.

API Usage

Because the ForeSee client code is loaded asynchronously, we provide a callback fsReady() that you can use to guarantee any interaction you may have with our JavaScript APIs waits until our modules have finished loading. You would use this in the same way that you would use a DomReady callback to guarantee that code runs after the page is ready. Here’s an example:

<script>
fsReady(function() {
   // Run this function to simulate a page load
   FSR.run();
});
</script>

Other articles in this section:

  1. Deployment Options
  2. The Embed Snippet (current article)
  3. ForeSee® On-Premises Deployment