A common request I hear from customers is the desire to integrate 3rd party data inside the digital marketing suite.  There are a few approaches to do this.  SAINT classifications allow you to add metadata to a particular data point.  Generally, we see this tool used to give campaigns friendly names or make an unfriendly product SKU readable.  Another option to bring in data as a data source.  Data sources come in many forms but are most commonly implemented to import aggregated pre-click data (such as email or display advertising data) with the online marketing suite.  Both of these methods are batch processes that are implemented either through an API call or and FTP upload.

API and FTP are straightforward methods for importing data, however it is at times necessary to include the integrated data in an image request in real-time.  By doing this, the integrated data becomes part of the visitor’s profile and can be used to create segments and correlated with other real time metrics.   During the Tag Manager lab at Summit, we presented a similar use case to look up a Twitter author’s handle and include this data within the image request in real time.  The process flow looks something like this:

A similar process flow can be used to integrate any kind of data that may not be necessarily available on the page or in a query string.  In my experience, the most common approach is to capture a view through metric on the first page of a visit in a display advertising integration.

We can easily implement this using Adobe Tag Manager and a dependent code block as I will illustrate below.   First, I’ll assume that you are up and running with Tag Manager.  If you are not, Brent’s post is a good place to start.  Adding Dependent code is possible in the product section of Tag Manager.  For this example, we’ll name the dependent code block “Twitter”.

The default code that is populated when you add the dependent code isn’t germane to this project except the first line.

s.Integrate.add("Twitter")

What this line does is create a specific “Twitter” namespace within the integrate module.  The name “Twitter” is the name I gave the integration when adding the code block.  By making this name unique, it allows for multiple integrations with individual namespaces that won’t collide with one another.

The most important element of the this block of code is the get request.

s.Integrate.Twitter.get("http://search.twitter.com/search.json?callback=s.Integrate.Twitter.tweeter&q=" + g);
s.Integrate.Twitter.delay();

The way the Twitter API works is that you make a call out to the service and include a callback function on the page along with the hashed handle name in the referrer.  What is returned is then passed to the callback function and includes the Twitter user’s handle.  The delay method is called to tell the remote code file to wait on sending the image request until the data is returned from the API or we hit the maxDelay time.  This will ensure that the data is received by the online marketing suite even if Twitter never responds to the the api request.

In this sample I made the maxDelay 2000 ms.  This can be adjusted based on your preference.  I normally start with 5000ms and work my way down.  We will want to ultimatly delay it long enough for the twitter api to respond but not too long that we lose page data.

I’ve included the full code below.  It’s important to note that this is not production code.  The Twitter API returns  the most recent Tweeter.  If you open the data structure that is returned you will notice that there is more data returned than just the handle.  Within the “text” data point you can discover if this is a re-Tweet.  Parsing this you could ultimately populate 2 variables – the Tweeter and the re-Tweeter.

s.Integrate.add(“Twitter”); s.maxDelay = “2000”; var g = s.referrer ? s.referrer : document.referrer; if(g.indexOf(‘t.co’) > -1) { s.Integrate.Twitter.get(“http://search.twitter.com/search.json?callback=s.Integrate.Twitter.tweeter&q=” + g); s.Integrate.Twitter.delay(); s.Integrate.Twitter.setVars = function(s,p) {    if (p) { s[tTwitterVar] = this.twitterResponse.from_user; } }   s.Integrate.Twitter.tweeter = function(obj) { if(typeof obj==’undefined’||obj.results.length==0){ return; }    this.twitterResponse = obj.results[0]; this.ready(); } }

Ultimately, there are many uses for dependent code.  This is can ultimately provide the functionality to send a single beacon request based on the a certain event being set or as I demonstrated a request to a web service for additional information.

Hopefully, this is functionality that you can build into your next TagManager project.

0 comments