This tutorial will show you how to setup Bronto Advanced JavaScript Conversion tracking using Google Tag Manager. Bronto Advanced JavaScript tracking gives you more visibility to all of the products that customers are purchasing, then allows you to create better segmentation based on better conversion data. This blog post from Bronto is a good explanation of what benefits you will get from Advanced conversion tracking. Google Tag Manager allows setup and deployment of third-party tracking and conversion pixels in a more controlled environment without the help of IT resources.

Bronto Tracking Requirements

The Bronto JavaScript Conversion tracking pixel requires an array of data to be passed to Bronto in a format that has been specified by Bronto. This is probably the most important requirement for this to work. Here is an example of the product feed:
[js]
<script type="text/javascript">
bta.addOrder({ "order_id": "", "email": "", "contact_id": "", "date": "", "items": [
{ "item_id":"item1", "desc":"description", "amount":"$123.33", "quantity":"1", "name":"name", "category":"category", "image":"http://imageUrl", "url":"http://itemUrl" },
{ "item_id":"item2", "desc":"description 2", "amount":"$10.25", "quantity":"1", "name":"name", "category":"category", "image":"http://imageUrl", "url":"http://itemUrl" }
]});
</script>
[/js]

The product feed will need to be outputted from your eCommerce platform on your order confirmation page, but I wanted to take this a step further to see if I could implement it inside of Google Tag Manager. GTM (Google Tag Manager) has been around about a year now and has become increasingly more usable over the past year.

Step 1 : Setup data layer on website

For our implementation, we had to setup a data layer on all of our website pages that would interface with Google Tag Manager. For more information on how to setup a data layer, check out this dev guide on google.com. The data layer has also been standardized. When Google is backing something, things get done the right way, including standardization. The data layer can include any information that you need to pass into a third-party tag, but for this tutorial we will be focusing on eCommerce sales order information.

The following JavaScript snippet is an example of the data layer that I have setup on the order confirmation page of my website. The data layer will be populated with order level information after an order has been placed. Google has a guide for suggested naming conventions for your variables which came in very handy. You define your data layer based on what the third-party tracking tags are expecting.
[js]

<script></pre>
dataLayer = [{
"event": "transaction",
"transactionLocale": "en_US_4S",
"transactionId": "o149277286",
"transactionResponseCode": "3227001",
"transactionTotal": 633.98,
"transactionShipping": 34.98,
"transactionTax": 42.48,
"transactionDiscount": 0,
"customerCity": "Palo Alto",
"customerState": "California",
"customerEmail": "test@testing.com",
"transactionProducts": [{
"id": "C1477409",
"name": "Boisset Family Estates Collection Buena Vista The Count",
"price": 298.99,
"quantity": 1,
"productType": "wine",
"caseType": "Straight Case",
"salesActivity": "Mailings"
}, {
"id": "C0177306",
"name": "WSJwine Annual Dozen – Seven Hills Syrah",
"price": 334.99,
"quantity": 1,
"productType": "wine",
"caseType": "Straight Case",
"salesActivity": "Mailings"
}, {
"id": "S0000277",
"name": "Champagne Flutes- Set of 2",
"price": 0,
"quantity": 1,
"productType": "nonfoodsundry",
"caseType": "Mixed Case",
"salesActivity": "Recruitment"
}]
}];
<pre>
</script>

[/js]

The Google Tag Manager (GTM) interface is very easy to use, there are a few steps that need to be taken to setup the Bronto Advanced JavaScript tracking.

Step 2 : Setup data layer macros in Google Tag Manager

The second step involves setting up Macros in GTM. The macros will match up to the variables that you have setup in your data layer. I have named all my macros that are pulled from the datalayer with a “dl_” in front of the macro name, this helps to keep them separate from any other macros I’m using for other tags. The following is a list of the macros I have setup to match from the data layer. This list can vary greatly depending upon what you put in your data layer.

  • dl_customerCity
  • dl_customerEmail
  • dl_customerState
  • dl_transactionDiscount
  • dl_transactionId
  • dl_transactionLocale
  • dl_transactionProducts
  • dl_transactionResponseCode
  • dl_transactionShipping
  • dl_transactionTax
  • dl_transactionTotal

Each data layer macro should be setup as a Data Layer Variable. The data layer variable name should match up to what was set in the data layer.

Screen Shot 2013-09-17 at 8.34.28 PM

At this point, you should have mapped all of your data layer variables as a macro in Google Tag Manager. You might be wondering why I haven’t mapped all the individual product attributes, this is because we will use an array and loop through each of the product attributes in the actual tag.

Step 3 : Setup Bronto Conversion Tag in Google Tag Manager

The third step involves setting up a tag in Google Tag Manager called “Bronto Conversion Tag”.

You need to make sure that you place this code (it can be grabbed from Home > Settings > Data Exchange) in the head somewhere of you document. It should be fired before the GTM code is fired.
[js]
<!–Open Body Tag –>
<script type="text/javascript">
document.write(unescape("%3Cscript src=’"
+ ((document.location.protocol == "https:") ? "https:" : "http:")
+ "//p.bm23.com/bta.js’ type=’text/javascript’%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var bta = new __bta(‘xxxxxxxxxxxxxxxxx’);
bta.setHost("email.xxx.com");
</script>
[/js]

The JavaScript below uses a mix of JavaScript and macros from GTM to loop through all the products purchased and pass them into Bronto in a format that Bronto is expecting as outlined at the beginning of this post. If you do not supply a pixel in this format, this will not work.
[js]

<script type="text/javascript">
var itemsArray = [];

//get the product data from the data layer via the macro
var dataLayerProducts = {{dl_transactionProducts}},
dataLayerProductCnt = dataLayerProducts.length;

//loop through the products
for(var i = 0; i < dataLayerProductCnt; i++) {
// copy into basket
itemsArray.push({
"item_id" : dataLayerProducts[i].id,
"desc" : dataLayerProducts[i].caseType,
"amount": dataLayerProducts[i].price,
"quantity": dataLayerProducts[i].quantity,
"name": dataLayerProducts[i].name,
"category": dataLayerProducts[i].productType,
"image": "",
"url": ""
});
}

itemsArray.push({
"item_id" : "",
"desc" : "Tax on Order",
"amount": {{dl_transactionTax}},
"quantity": "1",
"name": "Tax",
"category": "order",
"image": "",
"url": ""
});

itemsArray.push({
"item_id" : "",
"desc" : "Shipping on Order",
"amount": {{dl_transactionShipping}},
"quantity": "1",
"name": "Shipping",
"category": "order",
"image": "",
"url": ""
});

itemsArray.push({
"item_id" : {{dl_transactionResponseCode}},
"desc" : "Response Code on Order",
"amount": "0",
"quantity": "0",
"name": "Response Code",
"category": "order",
"image": "",
"url": ""
});
bta.addOrder({"order_id": {{dl_transactionId}},"email":"","contact_id":"","date":"","items": itemsArray});
</script>

[/js]

Step 4 : Setup Tag Firing Rules in Google Tag Manager

The last step involved is setting up tag firing rules in Google Tag Manager. If you noticed, the first variable in my data layer is an event variable with a value of transaction.

[js]
dataLayer = [{
"event": "transaction",
}];
[/js]

I can then use this event in a rule to fire off the Bronto Conversion Tag, as shown in the following screenshot. I have setup another Tag/Rule to set a cookie when the Bronto Conversion Tag fires which will prevent duplicate tags from firing if the page is refreshed. I can show how to set that up in a follow-up blog post.

Screen Shot 2013-09-17 at 8.57.03 PM

Once all of your tagging has been setup in Google Tag Manager, you can QA and then deploy the new tag container to your production environment.

Stay tuned for more posts on Google Tag Manager!


0 thoughts on “How to implement Bronto Email JavaScript Conversion tracking in Google Tag Manager”

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

GruntJS

My First GruntJS Plugin: Bust My Cache

GruntJS is a JavaScript Task runner that has been around for about 2+ year, at least as far as I can remember. I started playing around with GruntJS which uses Node.js about a year ago, Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…