Placing the BlueConic tag on your website is as simple as adding a single line.
Your BlueConic script source URL
The most important attribute of your BlueConic script tag is the web address or URL of the script. This URL typically takes one of two forms, depending on whether you are using a standard (default) hostname or a custom first-party BlueConic hostname:
- Default, standard hostname script source URL (see below to determine your actual script source URL) :
https://cdn.blueconic.net/[yourscriptname].js
- First-Party Hostname Console script source URL (see below to determine your actual script source URL):
https://[Blueconic-hostname.yourdomain.com]/script.js
There are a couple of alternatives available for deploying BlueConic tags to your website:
- Synchronous script (preferred)
- Asynchronous script
- Via Tag Manager (discouraged)
- Without CDN
An additional optional method is to explicitly define the channel for any of the above alternatives.
What is best for your website, BlueConic use cases, and performance 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. The value of the source script attribute of the script tag differs depending on whether you use the standard BlueConic hostname or a custom, first-party BlueConic hostname.
<script src="[your script source URL]"></script>
Replace the placeholder [your script source URL] in the code above with the script source URL you determined above in Determining your script source URL.
Example
If your script source URL is https://h854.taylorshop.com/script.js, the script tag would look like this:
<script src="https://h854.taylorshop.com/script.js"></script>
Notes on synchronous scripts
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 quickly and reliably 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 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="[your script source URL]" async></script>
This is almost the same as the code for the synchronous script, except for the added attribute async. Replace the [your script source URL] in the code above with the script source URL you determined above in Determining your script source URL.
Example
If your script source URL is https://h854.taylorshop.com/script.js, the script tag would look like this:
<script src="https://h854.taylorshop.com/script.js" async></script>
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 generally discouraged, because this method is inherently slower than synchronous or asynchronous loading. The BlueConic loading time will effectively be stacked on top of the tag manager's loading time. While this may be acceptable for data collection, when interacting with customer via inline content, the chance of visible "flickering" increases significantly.
If you cannot avoid using this method, or need a fast deployment followed by a later revision for user interactions, have the tag manager load the BlueConic script source URL you determined above in Determining your script source URL.
Example
If your site uses custom a first-party BlueConic hostname, for example h854.taylorshop.com, your script source URL would be:
https://h854.taylorshop.com/script.js
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 customers directly from BlueConic.
- In addition to flickering content, data collection mechanisms and Connections that rely on BlueConic data may have to wait.
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 bcScript = document.createElement('script');bcScript.async = true;
bcScript.src ='https://' + this.bcHostname + '/frontend/static/javascript/blueconic/blueconic.min.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bcScript);
})();
</script>
How to determine your script source URL
To put the BlueConic tag on your website, you have to determine the actual source URL of your script to apply these code examples to your site. Here are some examples showing BlueConic script source URLs using the standard, (default) tag, and then for custom first-party BlueConic hostnames created using the First-Party Hostname Console.
Sites using the standard BlueConic hostname
If your site does not use a custom first-party BlueConic hostname, it is using the standard BlueConic hostname. Your script source URL will look like:
https://cdn.blueconic.net/[yourscriptname].js
Where you replace [yourscriptname] with the hostname part of your BlueConic server URL.
Example
For example, if you access your BlueConic server at https://taylorshop.blueconic.net/, use the hostname part of your server URL in the script source URL, which results in:
https://cdn.blueconic.net/taylorshop.js
Sites using first-party BlueConic hostnames
If your site uses a custom first-party BlueConic hostname, its script source URL will be shown in the First-Party Hostname Console. Your script source URL would look like this:
https://[Blueconic-hostname.yourdomain.com]/script.js
Example
If your site uses custom a first-party BlueConic hostname, for example h854.taylorshop.com, your script source URL would be:
https://h854.taylorshop.com/script.js"
For information on using the First-Party Hostname Console to create BlueConic hostnames, see BlueConic hostnames overview.
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 short additional script above the BlueConic script tag that defines a bcChannelIdentifier before loading the BlueConic script, as shown below:
<script> bcChannelIdentifier = "extrachannel.yourserver.com"; </script> <script src="[your script source URL]"></script>
The [your script source URL] in the code above should be the hostname or domain of your BlueConic server.