BlueConic tag alternatives

Placing the BlueConic tag on your website is as simple as adding a single line. There are a couple of alternatives available for deploying BlueConic tags to your website:

What is best for your website and BlueConic use cases depends on how BlueConic will be used. The following sections delve deeper into the subject.

Synchronous script

This is the preferred method of BlueConic tag deployment.

Place the following line of code as high as possible after the <head> tag of your pages:

<script src="//cdn.blueconic.net/[yourscriptname].js"></script>

Replace the [yourscriptname] in the code above with the hostname or domain of your BlueConic server, depending on the hostname of your BlueConic server. See below on how to determine the actual script name.

Referencing scripts synchronously will load them in sequential order. A browser will display contents of a page as soon as all synchronous contents have been loaded. BlueConic uses a first class Content Delivery Network (CDN) to make sure the script is delivered as fast and reliable as possible to the visitor and to minimize the effect on the page loading time.

Important considerations when selecting the synchronous deployment option:

  • Loading the tag synchronously via CDN at the top of pages ensures optimal performance for data collection and on-page interactions
  • Page rendering time is dependent on the CDN. BlueConic’s scripts are served by Amazon CloudFront and will not be impacted by high traffic volume on your websites.

Asynchronous script

Referencing scripts asynchronously will allow for other scripts to load, and for content to render before the asynchronous script has been fully loaded. Asynchronous loading means the browser is free to decide when to load the BlueConic script, which increases the chance of a visible flickering effect when content is being replaced.

To use the asynchronous script, place the following line as high as possible after the <head> tag of your pages:

<script src="//cdn.blueconic.net/[yourscriptname].js" async></script>

This is almost the same as the code for the synchronous script, except for the added attribute async. Replace the [yourscriptname] in the code above with the hostname or domain of your BlueConic server, depending on the hostname of your BlueConic server. See below on how to determine the actual script name.

Important considerations when selecting the asynchronous deployment option:

  • If there are in-line interactions on the page, a flickering effect may be visible in the affected content.
  • Loading asynchronously may make the page appear to load slightly faster, though BlueConic uses a first class Content Delivery Network to make sure the script is delivered as fast and reliable as possible to the visitor and to minimize the effect on the page loading time.

Via Tag Manager

Loading BlueConic via a Tag Manager is typically discouraged, as this method is inherently slower than synchronous or asynchronous loading. The BlueConic loading time will effectively be stacked on the loading time of the tag manager. While this may be acceptable for data collection, when interacting with users via in-line content the chance of visible "flickering" increases significantly.

If you cannot avoid using this method, or simply need a fast deployment followed by a later revision for user interactions, have the tag manager load the BlueConic script from the URL shown below:

//cdn.blueconic.net/[yourscriptname].js

Replace the [yourscriptname] in this URL with the name of your script. See below on how to determine the actual script name.

Important considerations when selecting the tag manager deployment option:

  • Deploying via tag manager results in the highest chance of having to work through visible "flickering" of content later, when interacting with users directly from BlueConic.
  • In addition to flickering content, data collection mechanisms and Connections that rely on BlueConic data may have to wait.

How to determine the script name

To put the BlueConic tag on your website you have to determine the actual name of your script to use in the code examples. The actual script name depends on the server name of your BlueConic server which is easiest found via the address bar of your browser.

Example 1
For example, if you access your BlueConic server at https://taylorshop.blueconic.net/, use the hostname part of your URL as script name which results in:

<script src="//cdn.blueconic.net/taylorshop.js"></script>

Example 2
If, on the other hand, you access your BlueConic server as https://bc.taylorshop.com/, use the domain part of your URL as replacement which results in:

<script src="//cdn.blueconic.net/taylorshop.js"></script>

 

Without CDN

You really want to use one of the CDN options above with your production server, because it will significantly improve performance. However, in rare cases, your BlueConic server may not be compatible with CDN usage. For example, sandbox environments cannot use the CDN.

If you cannot use the CDN, you should use the following script with the actual name of your BlueConic server:

<script type="text/javascript">
  (function() {
    // Change to your actual BlueConic server name
    this.bcHostname = 'yourserver.blueconic.net';

    // Do not change anything below
    var protocol = (("https:" == document.location.protocol) ? "https://" : "http://");
    var bcScript = document.createElement('script');bcScript.async = true;
    bcScript.src = protocol + this.bcHostname + '/frontend/static/javascript/blueconic/blueconic.min.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bcScript);
  })();
</script>

Explicitly defining channels

By default BlueConic will recognize channels automatically by their URL and no extra action is required.

In situations where multiple channels are hosted on the same domain you might want to explicitly specify the channel instead of having it resolved automatically via the domain. For example, a separate mobile channel that is served via the same URL as the regular website channel. If you want to explicitly specify a channel name, you need to add a little script above defining a bcChannelIdentifier before loading the BlueConic script, as shown below:

<script>
  bcChannelIdentifier = "extrachannel.yourserver.blueconic.net";
</script>
<script src="//cdn.blueconic.net/[yourscriptname].js"></script>

The [yourscriptname] in the code above should be the hostname or domain of your BlueConic server.