Adding additional data to utag_data or b after utag.js has loaded?

[okbrown]

Hi,

I want to add an additional key and value to the utag_data object or the b object (since they are meant to be the same) but make sure it persists throughout the life of the tealium session or visitor id remains persistent also.

I won't be able to provide the data upfront and add it to the utag_data object before utag.js loads (as explained in the docs)  because I am making an HTTP request to see if the data I am trying to store in tealium exists in my DB and if not generate the data and add it into tealium's data_layer (I believe) then store in my DB.

Based on what I have read, one way to go is to make an extension, call the HTTP endpoint there and store the results in the b object e.g. b.foo = "bar" where it the docs suggest the data will persist from then on.

Is this correct? or is there another or better method?

Thanks

[okbrown]

Update:

created an extention to add data to 

b.foo = "bar"

however through once its added. it get replaced each time I refresh the page, which means it does not persist on the same object. I wonder if I should check utag_data or utag.data instead of checking b.foo to see if the data has persisted?

[calebjaquith]

Hi @okbrown ,

if you want to persist the data from pageview to pageview, adding it to the UDO won't be enough.  utag_data and utag.data are just window-scoped JS objects, so they only last the life of the page. b is even more short-lived.

You need to set a cookie (or use local/sessionStorage).

The easiest way to do that in TiQ will be to set a cookie using the Persist Data Value Extension.

So you might:

1. Use a Generic Tag to make your HTTP request
   
   
2. Use a tag-scoped JS Extension to set a callback for your Generic Tag, something like
   

   u.callback = function (response) {
     if (typeof response !== "string") response = "bar";
     utag.link({
       "event_name" : "data_callback",
       "foo" : response
     });
   }

   That callback will fire a utag.link event with the data from the response (obviously just illustration code). 
   
   
3. Set up a Persist Data Value Extension to persist the value of foo to a cookie like utag_main_foo (you'll need to add both those through the Data Layer tab).  You can set that up with a condition so that it's only set on 'data_callback' events.  I'd suggest using a utag_main subcookie to make sure that the session recognition is consistent (some browsers handle that strangely, better to let TiQ's session logic handle it).
   
   
4. Depending on your use case, you may also want to set a Load Rule on your Generic Tag so that it only fires when that cookie ( cp.utag_main_foo) isn't already set to make sure it only fires once per session.

That's off the top of my head and I haven't tested it through specifically, but those are the building blocks I'd suggest using.

Hope that helps?

Best
Caleb

[okbrown]

Thanks,

I just started going in this direction, so your reply has confirmed my thinking.

Great!!

[okbrown]

I do have one question, where can I find documentation for utag.link() how do i know that

  utag.link({
    "event_name" : "data_callback",
    "foo" : response
  });

this will add data to utag_main_foo cookie?

Edit: I need to get foo as a variable to the persisted data value.

[calebjaquith]

Here's some documentation on utag.link() - it's basically just a way to send a non-pageview event through TiQ's logic.

It's just an event, and as such doesn't set a cookie.  But it allows you to set up the Persist Data Values extension to set a cookie on qualifying events using the 'Conditions' at the bottom of that extension. 

Does that make sense?

[okbrown]

Thanks for your time,

It makes sense a little...

I can create the cookie, but how does the persisted data value know where foo is in the first place?

its not like it expecting an event called foo? dont i need to create a variable? so that I when i select "Persist" dropdown I can then select what it is going to persist to.

Feels like something is missing in the flow of it.

[calebjaquith]

Here's how I would configure the Persist Data Values extension here:

I created 3 variables:

• event_name (UDO)
• foo (UDO)
• utag_main_foo (First Party Cookie)

So if the 'event_name' is 'data_callback' on an incoming event (either utag.view or utag.link as I've configured it here, you could limit it further to only respond to links), the value of 'foo' will be persisted for the Session duration in a subcookie called 'foo' within the 'utag_main' cookie. 

That 'utag_main_foo' cookie could be used in the Load Rule for your Generic Tag, to only get that value if you haven't already gotten it within the same session.  

[okbrown]

Thanks, it makes more sense now

[okbrown]

Unfortunately the sub cookie does not store on the utag_main as utag_main_foo.

I have tried using a different variable other than event_name e.g. foo_event_name just in case there is another tags and extensions using it.

However no joy. could you give me a break down of execution steps or point to the correct part of the documentation that explains it when using;

• Persist Data Value
• Firsty Party Cookie
• Generic Tag which is attached to the Javascript Code Extension

My understanding would be the

1. The moment the Generic Tag loads it fires off the Javascript Code Extension
2. In the Javascript Code Extension the callback assigns a value to foo as a data_callback event within the utag_link({}) method
3. The Persist Data Extension is then fired when? as this is meant to check if foo_event_name is populated and  has a value of data_callback
   

I am pretty sure there is an order of execution issue here.

[okbrown]

Hi,

I think the order of execution here is the tricky part. Let me explain what I think is happening here.

Persist Data Value Extension is wating on the Javascript Code Extension on Generic Tag load which fires the callback utag_main.link({}) ?

Therefore:

1. Javascript Code Extension fires on the Generic Tag its assigned too
2. Then Persist Data Value Extension assigns that value to the cookie

Correct?

Edit: could the issue be because it needs version 4.38?

Trying other things...

[okbrown]

Hi,

unfortunately this is proving to be not possible based on what I am using from your guide and also from documentation.

I can supply data manually to a variable, but not asyncronously. There must be another way? and a much simpler way.

[calebjaquith]

Sorry for the confusion, you're right that my initial suggestion doesn't work.   The problem is that the callback to the Generic Tag doesn't include the response as an argument.

I've just set up a successful test:

1. Use a Custom Container tag to make your API request using xhr (allows you to use the response in your utag.link call).  We could use a JS extension instead, but IMO it's much cleaner to use Tags for all outgoing requests for the sake of possible Consent Management, etc.
   
   Just put this code (modify the requested resource and the utag.link as needed) between the 'Start Tag Sending Code' and 'End Tag Sending Code' comments:
   
   

   /* Start Tag Sending Code */
   
   // could add mapping to make this more generalized, hardcoding for now as POC
   var xhr = new XMLHttpRequest();
   var apiResource = 'https://putsreq.com/JTBXYfs30pQvioNwgV2Y'
   xhr.open('GET', apiResource);
   xhr.onload = function() {
     if (xhr.status === 200) {
       var data = {};
       data.event_name = "data_callback";
       data.foo = xhr.responseText;
       utag.link(data);
     }
     else {
       utag.DB('XHR API Request failed. Returned status of ' + xhr.status);
     }
   };
   xhr.send();
   
   /* End Tag Sending Code */

   No other changes are needed to that template.
   
   
2. Assign a Load Rule to that Custom Container so it only fires when the session cookie isn't yet defined
   
   
   
   
3. Set up a Persist Data Value Extension to persist 'foo' from your 'data_callback' event
   
   

Sorry for all the back-and-forth on this one, let me know if that works for you.

Best
Caleb