Back

This article shows how to send event data from your web page to the Microsoft Azure Event Bus service using the Tealium Custom Container tag. Before we begin, review the details of the Event Hubs API to familiarize yourself with the POST format and the expected responses. This will help you understand how the custom tag is built.

Add Custom Container Tag

Now it’s time to build the template.

  1. Open Tealium iQ and navigate to the Tags tab
  2. Click Add Tag and search for "Tealium Custom Container"
  3. Set the title to "Microsoft Azure" and click Finish
  4. Save the profile (do not publish)

Now that the tag is saved you have access to the template of the Tealium Custom Container.

To customize the tag template:

  1. Click Edit in the new Tag Configuration
  2. Expand the “Advanced Settings“ and click Edit Templates
  3. Copy/Paste the below code into the template, being sure to change the values for:
    •  u.servicebus
    •  u.servicebusqueue
    •  u.sharedaccessignature
  4. Click Save Profile Template
  5. Save and publish the profile
//~~tv:13999.20160822
//~~tc: Microsoft Azure

//tealium universal tag - utag.sender.custom_container ut4.0.##UTVERSION##, Copyright ##UTYEAR## Tealium.com Inc. All Rights Reserved.
try {
(function(id, loader, u) { try { u = utag.o[loader].sender[id] = {} } catch(e) { u = utag.sender[id] }; u.ev = { 'all': 1 }; /* EDIT THE FOLLOWING 3 LINES */ u.servicebus = "YOUR_SERVICE_BUG"; u.servicebusqueue = "YOUR_QUEUE"; u.sharedaccessignature = "SharedAccessSignature sr=https%3A%2F%2F{SERVICE_BUS}.servicebus.windows.net%2F&sig={SIG}&se=147207909&skn=RootManageSharedAccessKey"; /* EDIT THE ABOVE 3 LINES */ ##UTGEN## u.send = function(a, b, c, d, e, f) { if (u.ev[a] || typeof u.ev["all"] != "undefined") { u.data = utag.datacloud || {}; u.data["loader.cfg"] = {}; for (d in utag.loader.GV(utag.loader.cfg)) { if (utag.loader.cfg[d].load && utag.loader.cfg[d].send) { utag.loader.cfg[d].executed = 1; } else { utag.loader.cfg[d].executed = 0; } u.data["loader.cfg"][d] = utag.loader.GV(utag.loader.cfg[d]); } u.data.data = b; for (d in u.data.data) { if ((d + '').indexOf("qp.") == 0) { u.data.data[d] = encodeURIComponent(u.data.data[d]); } /* Re-encode items in "qp." params */ else if ((d + '').indexOf("va.") == 0) { delete u.data.data[d]; } /* Remove visitor attributes */ } u.data["event"] = a + ''; /* event type */ var dt = new Date(); u.data["post_time"] = dt.getTime(); /* event timestamp */ u.data.browser = {}; try { u.data.browser["height"] = window.innerHeight || document.body.clientHeight; u.data.browser["width"] = window.innerWidth || document.body.clientWidth; u.data.browser["screen_height"] = screen.height; u.data.browser["screen_width"] = screen.width; u.data.browser["timezone_offset"] = dt.getTimezoneOffset(); } catch(e) { utag.DB(e) } var json_string = JSON.stringify(u.data); if (window.FormData) { // modern browsers var formData = new FormData(); formData.append("data", json_string); function postData(data) { var xhr = new XMLHttpRequest(); var path = "https://" + u.servicebus + ".servicebus.windows.net/" + u.servicebusqueue + "/messages?timeout=60&api-version=2014-01"; xhr.open('post', path, true); xhr.setRequestHeader("Authorization", u.sharedaccessignature); xhr.setRequestHeader("Content-Type", "application/atom+xml"); xhr.setRequestHeader("type", "entry"); xhr.withCredentials = true; xhr.send(data); } postData(formData); } else { // older browsers console.log("Browser does not support XHR") } } } try { utag.o[loader].loader.LOAD(id) } catch(e) { utag.loader.LOAD(id) } })('##UTID##', '##UTLOADERID##'); } catch(e) {} //end tealium universal tag

With Azure configured to accept the data, and Tealium iQ configured to send the data, you can now test the setup. Visit a page where this tag will load and open your browser's developer tools to filter the network logs on "servicebus". If your Azure setup was successful you will see a 201 response. If you see another type of response you can troubleshoot the issue using the Microsoft Azure REST API reference guide.