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).
Before you begin
Add your channels in BlueConic.
Create and configure your hostname (either standard or generated using the First-Party Hostname Console).
Confirm the status of your hostname is "Ready."
Add to sites using first-party BlueConic hostnames
BlueConic recommends you first generate your first-party hostname and then add the script to your website. Otherwise, you'll have to update the script once the new hostname is configured, and this can lead to issues.
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>
Update BlueConic script on your site with a new hostname
To update existing BlueConic channels with new BlueConic hostnames, you need to update the BlueConic script to use your new custom hostname. If your BlueConic script currently references the standard BlueConic hostname and script, you would update this to the newly suggested script.
Ensure the assigned hostname for the channel in BlueConic is up to date and accurately reflects the new first-party hostname. Open the Channels window and select a BlueConic channel to customize.
Navigate to Channels & BlueConic hostnames and select BlueConic hostnames.
Click Show in the BlueConic hostnames window, or retrieve the email BlueConic sent containing your JavaScript tag.
Update all pages according to the new tag. When you use custom first-party BlueConic hostnames, your script follows this format:
<script src="https://[Blueconic-hostname.yourdomain.com]/script.js"></script>
For example, you would update:
<script src="https://cdn.blueconic.net/taylor-shopping.js"></script>
On all pages to:
<script src="https://i473.taylor-shopping.net/script.js"></script>
Add to 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.
We also support alternative methods to place the tag. See BlueConic JavaScript tag alternatives to learn more.
Validating your tag implementation
We recommend validating your tag is operational as soon as possible after applying it to your channels.
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. Compare this to your analytics platform and confirm results.
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.
As soon as the BlueConic script is loaded, all defined positions will be polled. When a position becomes available, it will be made transparent using CSS. Original content is hidden from the visitor while the replacement content is injected. As long as the BlueConic script is loaded before any content has been rendered, flickering will not occur. After a dialogue has replaced the content, or after a timeout (whichever comes first), the position will be made visible again.
Tips to avoid content flickering
Delete positions that are not actively being used by a dialogue.
Avoid using dialogue positions that take up the full page, such as the <body> or <html> elements.
Ensure that the BlueConic script is loaded as soon as possible. We recommend placing the script at the very top of the HEAD section of each page. Any other solution, including using a tag management solution to trigger the BlueConic script, may introduce flickering.
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