Recently at my job, I had to setup Bronto email tracking pixels on our order confirmation page. The tracking pixels came in the form of an image tag and had to be populated with some values from our shopping cart. The values (invoice number and order amount) are passed from the order confirmation page using hidden fields.

[html]
<input name="InvID" type="hidden" id="InvID" value="12345" />
<input name="Tot" type="hidden" id="Tot" value="69.9900" />
[/html]

I then used JavaScript to extract the values in the hidden inputs and assigned them variables.

[js]
var InvoID = document.getElementById("InvID").value;
var SubTotal = document.getElementById("Tot").value;
[/js]

Then, I used document.write to create an image tag on the fly with the correct values filled out using JavaScript concatenation.

[js]
document.write("<img src=’http://bronto.com?type=$&description="+InvItemName+"&money="+ItemPrice+">’");
[/js]

I have recently found that if you have apostrophes in your code, it will break the above tracking script. A way around this would be to use a string replace function like this:
[js]
InvItemName.replace(/’/i,"")
[/js]

*NOTICE: The values in the scripts are dummy values, as I had to hide some confidential account data. The code is just to show as an example, but its pretty easy to setup. You can use similar techniques to setup Google, MSN, Yahoo, and other types of tracking pixels.

Categories: JavaScript/AjaxjQuery

1 thought on “How to setup Bronto Tracking Pixels with JavaScript”

Peace · February 2, 2010 at 7:56 am

Hi Jake,

We are a newly bronto client and we are currently having a problem with their tracking conversion code because it will not dynamically track revenue of our campaign. Your blog has been referred to us but unfortunately we are not that expert in javascripting. We are a yahoo!store. Can you help us?

Peace

Leave a Reply

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

Related Posts

eCommerce

Optimizely and jQuery – The new A/B Testing Platform

Being that I work in the eCommerce space, we talk a lot about A/B testing and it has also become a huge topic of conversation on the internet/twitter/facebook. Over the past two years, there have Read more…

HTML5

What are Web Hooks?

In an effort to push my skills front-end development with jQuery, I have began trying to learn more about Web Hooks. Web Hooks are essentially user-defined callbacks or events, which can be used in a Read more…

jQuery

Smashing jQuery – Working on Updated eBook.

Just wanted to let all my fans who have purchased Smashing jQuery that I’m currently working with my publisher, Wiley, to fix all of the code errors that are present in the book and we Read more…