A com­mon request I hear from cus­tomers is the desire to inte­grate 3rd party data inside the dig­i­tal mar­ket­ing suite.  There are a few approaches to do this.  SAINT clas­si­fi­ca­tions allow you to add meta­data to a par­tic­u­lar data point.  Gen­er­ally, we see this tool used to give cam­paigns friendly names or make an unfriendly prod­uct SKU read­able.  Another option to bring in data as a data source.  Data sources come in many forms but are most com­monly imple­mented to import aggre­gated pre-click data (such as email or dis­play adver­tis­ing data) with the online mar­ket­ing suite.  Both of these meth­ods are batch processes that are imple­mented either through an API call or and FTP upload.

API and FTP are straight­for­ward meth­ods for import­ing data, how­ever it is at times nec­es­sary to include the inte­grated data in an image request in real-time.  By doing this, the inte­grated data becomes part of the visitor’s pro­file and can be used to cre­ate seg­ments and cor­re­lated with other real time met­rics.   Dur­ing the Tag Man­ager lab at Sum­mit, we pre­sented a sim­i­lar use case to look up a Twit­ter author’s han­dle and include this data within the image request in real time.  The process flow looks some­thing like this:

A sim­i­lar process flow can be used to inte­grate any kind of data that may not be nec­es­sar­ily avail­able on the page or in a query string.  In my expe­ri­ence, the most com­mon approach is to cap­ture a view through met­ric on the first page of a visit in a dis­play adver­tis­ing integration.

We can eas­ily imple­ment this using Adobe Tag Man­ager and a depen­dent code block as I will illus­trate below.   First, I’ll assume that you are up and run­ning with Tag Man­ager.  If you are not, Brent’s post is a good place to start.  Adding Depen­dent code is pos­si­ble in the prod­uct sec­tion of Tag Man­ager.  For this exam­ple, we’ll name the depen­dent code block “Twitter”.

The default code that is pop­u­lated when you add the depen­dent code isn’t ger­mane to this project except the first line.

s.Integrate.add("Twitter")

What this line does is cre­ate a spe­cific “Twit­ter” name­space within the inte­grate mod­ule.  The name “Twit­ter” is the name I gave the inte­gra­tion when adding the code block.  By mak­ing this name unique, it allows for mul­ti­ple inte­gra­tions with indi­vid­ual name­spaces that won’t col­lide with one another.

The most impor­tant ele­ment 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 Twit­ter API works is that you make a call out to the ser­vice and include a call­back func­tion on the page along with the hashed han­dle name in the refer­rer.  What is returned is then passed to the call­back func­tion and includes the Twit­ter user’s han­dle.  The delay method is called to tell the remote code file to wait on send­ing the image request until the data is returned from the API or we hit the maxDe­lay time.  This will ensure that the data is received by the online mar­ket­ing suite even if Twit­ter never responds to the the api request.

In this sam­ple I made the maxDe­lay 2000 ms.  This can be adjusted based on your pref­er­ence.  I nor­mally start with 5000ms and work my way down.  We will want to ulti­matly delay it long enough for the twit­ter api to respond but not too long that we lose page data.

I’ve included the full code below.  It’s impor­tant to note that this is not pro­duc­tion code.  The Twit­ter API returns  the most recent Tweeter.  If you open the data struc­ture that is returned you will notice that there is more data returned than just the han­dle.  Within the “text” data point you can dis­cover if this is a re-Tweet.  Pars­ing this you could ulti­mately pop­u­late 2 vari­ables – 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 ℗ { 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(); } }

Ulti­mately, there are many uses for depen­dent code.  This is can ulti­mately pro­vide the func­tion­al­ity to send a sin­gle bea­con request based on the a cer­tain event being set or as I demon­strated a request to a web ser­vice for addi­tional information.

Hope­fully, this is func­tion­al­ity that you can build into your next Tag­Man­ager project.

0 comments