To use BlueConic with your website, you need to place the BlueConic JavaScript tag on all pages that you want to use BlueConic to collect data or interact with users.
The format of your BlueConic script differs slightly depending on whether you use custom first-party BlueConic hostname (for example, r5687.taylor-store.com) or the hostname provided by the BlueConic CDN server (for example, taylor-store.blueconic.net).
Sites using first-party BlueConic hostnames
If your site uses a custom first-party BlueConic hostname, place the following line of code as high as possible inside the <head> section on every page of your channel(s), as described in the email from BlueConic:
<script src="https://[Blueconic-hostname.yourdomain.com]/script.js"></script>
Example
If your site uses a custom first-party BlueConic hostname, for example h854.taylorshop.com, your script would resemble this example, where h854 is the first-party BlueConic hostname and taylorshop.com is your domain name.
<script src="https://h854.taylorshop.com/script.js"></script>
For information on using the First-Party Hostname Console to create BlueConic hostnames, see BlueConic hostnames overview and Creating and configuring BlueConic hostnames.
Sites using blueconic.net for the CDN
If your site uses standard hostnames, place the following line of code as high as possible after the <head> tag of your pages:
<script src="https://cdn.blueconic.net/[yourscriptname].js"></script>
The [yourscriptname] in the code above should be the hostname of your BlueConic server.
Examples
If you access your BlueConic server at https://taylorshop.blueconic.net/, use the hostname part of your URL as replacement which results in:
<script src="https://cdn.blueconic.net/taylorshop.js"></script>
This would look as follows in a webpage:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.blueconic.net/taylorshop.js"></script>
<meta charset="UTF-8">
<title>...</title>
<script src="/script/jquery.min.js"></script>
...
</head>
<body>
...
</body>
</head>
Once you have the tag in place, congratulations! You are now ready to start using BlueConic!
Our script is being served by Amazon CloudFront and will not be impacted by high traffic volume on your websites.
This is the recommended way to add the BlueConic tag to your pages. We also support alternative methods to place the tag. See BlueConic JavaScript tag alternatives to learn more.
Validating your tag implementation
In BlueConic, you can validate that your tag implementation is working properly in many ways. We recommend validating as soon as possible after applying tags to your channels.
You can start by validating data in BlueConic against data from your analytics platform. If you filter an analytics report to show the number of unique visitors in the last 24 hours, this should maintain a close distance (but will not exactly match) from a report you can pull in BlueConic.
To check in BlueConic, select Insights from the More menu:
Once you are there, click Add dashboard at the top right:
Then click Add Insight:
Select the Segment discovery chart (select the Show all box if it is not listed):
To show the number of profiles visiting in the last 24 hours, find the "Last visited date" profile property below the segment discovery wheel (hint: type "last"):
Begin building a segment of users visiting in the last day:
The chart displays the number of profiles visiting in the last 24 hours:
FAQ: BlueConic JavaScript tag
How big is your code and will it slow down our site?
From your standpoint, the BlueConic code snippet is two lines long. That’s all you’ll need to give your developers. We’ve compressed the file that has all of the power of the platform to make it as small as possible. On a person’s first visit to the site, the end user downloads the BlueConic library (‘blueconic. min.js’) and the ‘Big Library’, containing all interaction type definitions (JavaScript code) and external libraries needed.
How can I ensure that web browsers recognize my script tag as first party?
In an effort to curtail third-party data collection, some browsers block scripts that set cookies. By using the BlueConic First-Party Hostname Console, you can create custom first-party hostnames to use in your BlueConic script tag. For information on creating custom BlueConic hostnames, see BlueConic hostnames overview.
Can I deploy the BlueConic tag with our tag management tool?
When placing the tag in or near the header in the HTML, the page in the browser is not rendered yet, which allows BlueConic to execute personalization in the page before the position on the page where that unique interaction will occur is rendered.
If a personalization tag (from BlueConic or from others, for that matter) is loaded through a tag manager, there will be a long enough delay that there is a risk that the page is already rendered, so then the user sees the original content in a part of the page first, and then that page gets overwritten by the personalized content.
Here’s our way of ensuring the load is as fast as possible:
-
The BlueConic tag contains all libraries needed to do personalization and is loaded only once for a first-time visitor. After that first visit, those libraries are cached in the browser and not reloaded over the network again.
-
The tag is minimized and gzip compressed (for comparison: at about 40kb, the tag is smaller than most pictures on a website)
-
The tag is placed on CloudFront CDN from Amazon to ensure the tag is always loaded as fast as possible.
If you’re not using BlueConic for personalization, then this is all moot and you can deploy through your tag manager and call it a day.
Our CMS is old, highly customized, monstrous, or complex. Can we still use BlueConic?
You bet. A CMS takes care of rendering the HTML for a website server-side, meaning the browser asks the web server for a page, and the CMS creates the HTML and other assets for a page and sends it back to the browser.
Like other types of web-based tools, BlueConic works completely in the browser. It does not interfere or integrate with the CMS itself, only with the resulting HTML that the CMS spits out. For that reason, it doesn’t really matter what kind of CMS you have: BlueConic can always work with your website.
OK, but what about flicker?
After years of working in web tech, we built in smart mechanisms to prevent flicker effect even when loading is slow; for example, whitening out the part of the webpage where personalization will take place immediately while rendering the page, until BlueConic is sure that it is going to personalize that placement, or revert to the original content.
We have an SPI/SPA site. Still fine?
For 95% of our customers, embedding the code gets everything working out-of-the-box and you just have to go, go, go! For the other 5% of our customers, which typically are SPI/SPA, they can require some additional configuration and/or development on BlueConic’s part to get things working. This usually means deploying a plugin, which will handle the dynamic page transitions. For more information, refer to Will BlueConic work with a single-page application (SPA).
What does the BlueConic client-side script flow look like?
The following request flow visualizes how the BlueConic script works from a browser's point of view:
- The loading time for the first page view of the first visit
- The loading time for subsequent page views
- The script execution time