August 24, 2011

Javascript Conversion Tracking: Setup And Reporting

by John Gunther,

As part of our continuous deployment development cycle, we have rolled out several new features centered around using our new Javascript Conversion Tracking feature. A few weeks ago, Amanda Harris wrote a great blog post outlining some of the things you should consider when using conversion tracking. I highly suggest you read that blog post before switching to the Javascript Conversion Tracking. In this post, I'll go over how to set up the Javascript Conversion Tracking, and how to view the data associated with the conversions you track.

Setup

For the most part, setting up the Javascript Conversion Tracking is pretty straightforward. However, if you do want to implement this feature, we recommend comfort with HTML and Javascript.

To set up the Javascript Conversion Tracking:

  1. Go to Home->Settings->Bronto Labs.
  2. Click Enable next to Javascript Conversion Tracking.
  3. Go to Home->Settings->Data Exchange.
  4. Copy the Javascript Conversion Tracking code snippet. When you first copy the Javascript Conversion Tracking code snippet from the Data Exchange page, the bta variable will have values unique to your account. DO NOT CHANGE these values.
  5. Paste the code snippet on your order confirmation or checkout pages. You will need to pass in the values for the data you want to track into the addConversion method.

Below is a basic code example which will show you how to dynamically pull values from an HTML table and add them to the addConversion method:

<html>
<body>
	<p>Dear <span id="username">Mr. Customer,</span></p>
	<p>Thank you for your shopping with us. Here is you receipt:</p>
	<p>Date <span id="date">8-23-2011</span></p>
	<table id="purchTable" border="1">
			<tr>
				<th>Order Number</th>
				<th>Item Number</th>
				<th>Description</th>
				<th>Quantity</th>
				<th>Price</th>
			</tr>
			<tr>
				<td>238924745</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>23789</td>
				<td>Soccer Ball</td>
				<td>2</td>
				<td>$39.99</td>
			</tr>
			<tr>
				<td></td>
				<td>234142</td>
				<td>Soccer Jersey</td>
				<td>1</td>
				<td>$99.99</td>
			</tr>
		</table>

<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('azhosisihiovnwzkgisoaqnookhfbfi');
bta.setHost("app.example.com");
//Get the values from the HTML and assign them to variables

var order_no  = document.getElementById('purchTable').rows[1].cells[0].innerHTML;
var date = document.getElementById('date').innerHTML;

var item1 = document.getElementById('purchTable').rows[2].cells[1].innerHTML;
var description1 = document.getElementById('purchTable').rows[2].cells[2].innerHTML;
var quan1 = document.getElementById('purchTable').rows[2].cells[3].innerHTML;
var total1 = document.getElementById('purchTable').rows[2].cells[4].innerHTML;

var item2 = document.getElementById('purchTable').rows[3].cells[1].innerHTML;
var description2 = document.getElementById('purchTable').rows[3].cells[2].innerHTML;
var quan2 = document.getElementById('purchTable').rows[3].cells[3].innerHTML;
var total2 = document.getElementById('purchTable').rows[3].cells[4].innerHTML;

// New, Advanced Conversion tracking example method
// Note: the item_id cannot contain spaces!				

bta.addConversion({ "order_id": order_no, "date": date,
	"items": [
		{ "item_id":item1, "desc":description1, "amount":total1, "quantity":quan1 },
		{ "item_id":item2, "desc":description2, "amount":total2, "quantity":quan2 }
	]
});

</script>
</body>
</html>

Viewing Conversion Data Recorded by the Javascript Conversion Tracking

Of equal importance to being able to track conversions, is being able to view reporting metrics for conversions. For any conversions recorded using the Javascript Conversion Tracking, you can view metrics for these conversions from within the application by viewing message, delivery, or delivery group reports for emails you have sent.

To view metrics for conversions tracked using the Javascript Conversion Tracking:

  1. Go to Home->Settings->Bronto Labs.
  2. Click Enable next to Javascript Conversion Report.
  3. Navigate to the report for the email message or delivery you want to view conversions for.
  4. Click Conversions.

At the top of the report, you can view the high-level conversion metrics for the email message for delivery you are viewing a report for. At the bottom of the report, you can view each conversion, sorted by order ID. If you click on an order ID, you can view the items (by ID) that make up the order. The Javascript Conversion Tracking opens the door to tracking more detailed data about conversions. If you have any questions about the setup or reporting for the Javascript Conversion Tracking, please leave them in the comments section below.

John Gunther
Technical Writer/eLearning Specialist at Bronto
Editor of Brontoversity

About the Author
John Gunther's picture

John Gunther,

Read about John

Join the Conversation