How to install Bunting

At its heart, Bunting is a JavaScript library that can be added to your HTML.

A master tracking code which should be installed on all webpages in which you want Bunting to learn about your user base. This script contacts Bunting, and sends tracking information to your own Bunting dashboard.

There are also page-specific tracking scripts to identify whereabouts on the website the end-user is (For example, to detect if they are on the Basket/Cart page, and what items they have in their basket).

Bunting requires this information to learn about your user base, and allows sophisticated and granular visitor targeting conditions to be set up.

This document describes each possible Bunting tracking code, and an explanation of the implementation requirements for each.

In addition, if Bunting is to learn about stock levels for products (as is the case in Scarcity messaging), then a Product XML feed of your entire product inventory should be supplied. The schema is discussed here:

Master Code

The below Immediately Invoked Function Expression is the core Bunting script. It must be added to all pages throughout your site. This enables knowledge about the user and their journey to be gained, as well as enabling us to deploy split tests and content.

The async and defer flags are set, meaning it will not block execution of your critical web content and not have an apparent effect on site render for the end-user.

<script type="text/javascript" id="bunting_script_1">(function(){if(typeof window.$_Bunting=="undefined")window.$_Bunting={d:{}};$_Bunting.src=("https:"==document.location.protocol?"https://":"http://")+"";$_Bunting.s=document.createElement("script");$_Bunting.s.type="text/javascript";$_Bunting.s.async=true;$_Bunting.s.defer=true;$_Bunting.s.charset="UTF-8";$_Bunting.s.src=$_Bunting.src;document.getElementsByTagName("head")[0].appendChild($_Bunting.s)})()</script>

Please note YOUR_BUNTING_ACCOUNT_ID will be replaced with your actual account ID when your Bunting dashboard is set up.


Please copy & paste this code on your homepage. Nothing needs to be edited – just copy & paste.

<script type="text/javascript"> if (typeof window.$_Bunting=="undefined"){window.$_Bunting={d:{}};}$_Bunting.d.hp = "yes";</script>

Product Page / PDP

Edit and paste this code on all product pages. Complete the unique product ID value with the corresponding ID from your database. This ID must match the ID of the product on the cart page, the order complete page, and in your product feed.

<script type="text/javascript"> if (typeof window.$_Bunting=="undefined"){window.$_Bunting={d:{}};} $_Bunting.d.vp_upc = ""; // Enter unique product ID used by your system here</script>

Category Page / PLP

Edit and paste this code on all category pages. The value is the category path used by your system. Nested categories are separated by > symbols. Eg: Electronics > Computers > Laptops. This value must match that within product feed.

<script type="text/javascript"> if (typeof window.$_Bunting=="undefined"){window.$_Bunting={d:{}};} $_Bunting.d.c = ""; // Enter the category name as used by your system here</script>

Basket / Cart Page

Edit and paste this code on your shopping cart page. Repeat the marked snippet of code with appropriate values for each product in a shopper’s cart. If the cart is empty then remove the bit: $_Bunting.d.cp.push([ .... ]);

<script type="text/javascript"> if (typeof $_Bunting=="undefined"){ var $_Bunting={d:{}}; } $_Bunting.d.cp = new Array(); $_Bunting.d.cdc = "";  // Delivery cost of the cart (number)
// Repeat the following code for each product in cart - start here
  "", // Mandatory. Unique product ID used by your system (text). Eg: "7493". Must match the ID on your product page / product feed
  "", // Mandatory. Product price in GREAT BRITISH POUNDS (number), NO currency symbols. Eg: "349.95"
  "" // Mandatory. Quantity in cart (number). Eg: "1"
// End cart product repetition here

Checkout Page

Please copy & paste this code on every page of your checkout. This does NOT include your cart or order complete page. Nothing needs to be edited – just copy & paste.

<script type="text/javascript">if (typeof window.$_Bunting=="undefined"){ window.$_Bunting={d:{}}; } $ = "yes";</script>

Order Complete / Thank you page

Edit and paste this code on any page that directly follows an order being placed (eg: your ‘Thank you’ page). Repeat the marked snippet of code with appropriate values for each product the customer has ordered.

<script type="text/javascript">
  if (typeof $_Bunting=="undefined") { var $_Bunting={d:{}}; }
  $_Bunting.d.uc = "yes"; // Do not edit
  $_Bunting.d.op = new Array(); // Do not edit
  // Edit from here onwards...
  $_Bunting.d.uoc = "";  // Unique order ID generated by your system (text)
  $_Bunting.d.odc = 0;  // Delivery cost of the order (number)
  // Repeat the following code for each product that has been ordered - start here
    "",     // Unique product id (text). Eg: "7493". Must match the ID on your product page / product feed
    "",     // Product price in GREAT BRITISH POUNDS (number), NO currency symbols. Eg: "349.95"
    ""      // Quantity ordered (number). Eg: "1"
  // End ordered product repetition here

Extra Information (Optional But Recommended)

This section is intended to go on any page after the visitor has identified themself. This could be a contact form completion page, an order complete page, or after logging in to an account. All values below are optional, but it is recommended you supply them if they are available.

Browsing Currency

Set the $ value to corresponding 3-character ISO currency code, which the visitor is browsing. When they switch currency, change this variable.

  <script type="text/javascript">
  if (typeof window.$_Bunting=='undefined'){ window.$_Bunting={d:{}}; }
  $ = 'GBP'; // Set visitor's currency to: 'GBP', or 'USD'

Known Visitor Details

Does your website already have information about your visitors? Perhaps your database stores details that can be recalled and sent to Bunting when they log in to an account on your site? If so, enter these:

<script type="text/javascript">
if (typeof window.$_Bunting=='undefined'){ window.$_Bunting={d:{}}; }

$_Bunting.d.fn = ""; // The visitor's forename, if known
$ = ""; // The visitor's surname, if known
$_Bunting.d.ea = ""; // The visitor's email address, if known
$_Bunting.d.g = "";  // The visitor's gender. Enter 'male' or 'female' if known, or leave empty


Account Log In Status

When a visitor logs in to your website, set the variable $_Bunting.d.uac to the unique account ID which your website uses to identify them (only applicable if your site supports a visitor login).

  <script type="text/javascript">
  if (typeof window.$_Bunting=='undefined'){ window.$_Bunting={d:{}}; }
  $_Bunting.d.uac = ""; // Unique account number / code when a visitor is logged in to their account on your site

Email Subscription Status

By default, to comply with GDPR, the email subscription status of all visitors is set to optout, meaning they won’t be applicable to receive targeted emails from Bunting. When a visitor subscribes, set the variable $_Bunting.d.ess to subscribed (copy/paste the code below). If the visitor later decides to optout then you can let Bunting know by switching the value to optout. Read more on our GDPR compliance here:

  <script type="text/javascript">
  if (typeof window.$_Bunting=='undefined'){ window.$_Bunting={d:{}}; }
  $_Bunting.d.ess = "subscribed"; // 'subscribed' or 'optout'

Creating Lightboxes

Lightboxes pose a way to present additional information to your users after a certain event or trigger.

In the context of Bunting, good uses for these tools are to create brand awareness (such as promoting a featured item specifically), reiterating unique selling points (such as the number of 5 star reviews), gaining feedback via forms, and encouraging sales via promotions.


Designing captivating lightbox content

Good content is the foundation of the web, and this should also be applicable to your lightbox content.

We would recommend using the following lightbox guidelines:

  • Size of no larger than 900x450px.
  • Font Size of at least 16px.
  • Clear contrasting colours, especially where the close button is concerned, and any other calls-to-action.
  • Use either PNG or JPG for any background images.


Information about the GDPR for Bunting Customers

This document details how Bunting complies with the GDPR, and is intended to help our users become GDPR compliant when using Bunting. Nothing in this document should be treated as legal advice, and we strongly recommend our users seek legal advice as part of their GDPR preparations.

Bunting has been preparing for GDPR since early 2017. We have had a full data protection audit, working with data protection lawyers to ensure total compliance. Our processes and our software have been updated to meet GDPR requirements since mid 2017, well before the deadline.


How to update your email database in Bunting with customer consent (GDPR compliance)

It is now necessary to obtain consent from your customers in the EU in order to send email marketing communications, including abandoned cart emails. This ​must​ be an affirmative opt-in (not a pre-ticked box).

Before you can use Bunting’s email tools, Bunting must know that consent has been given from each recipient. By default, Bunting sets all visitor’s email subscription statuses as being opted out (‘optout’).