Establishing utag_data on SPA pages

[kbridges]

Hi.  I have a client who is transitioning to single page architecture (SPA) for their commerce pages, and we are helping to set up Adobe Analytics tracking for them in Tealium.  

They are using utag.view() calls to represent "virtual" page views throughout the commerce flow.  They are passing an object to utag.view() with a series of "utag_data" variables and values as a parameter.  An example of a view shopping cart utag.view() call might look like:

utag.view({
utag_data.section = “billing-center”;
utag_data.sub_section = "cart";
utag_data.template = “cart-overview”;

utag_data.event_type = “scView”;
utag_data.language = “en”;
utag_data.region = “US”;

utag_data.system_date_utc = “2017-08-29T23:58:38Z”;
utag_data.user_timezone = “America/Los_Angeles”;
utag_data.website_country = “US”;

utag_data.product_id = [“abc1”, “def2”];

utag_data.product_quantity = [“1”, “2”];

utag_data.product_unit_price = [“1240.00”, “249.00”];
});

They are not formally declaring utag_data as a variable in thier code.  The effects of this are that I can use the variables passed in the call to map data in the Tealium SiteCatalyst AppMeasurement Tag, but all other variables are empty, including built in stuff like dom.url, etc.  Also, when I view the Tealium Web Companion>Data tool and look at the Univeral Data Object, it's empty.  

If I ask the website development team to add a formal utag_data var declaration to the page, will this fix this issue?  If so, should the developer shift all of the utag_data variables to the utag_data object, and stop passing them directly in the utag.view function calls? 

Thanks!

[adrian_browning]

@kbridges

Just to start with the example call you have pasted will not work, a better example of this call is: 

utag.view({
  "section"           : "billing-center",
  "sub_section"       : "cart",
  "template"          : "cart-overview",
  "event_type"        : "scView",
  "language"          : "en",
  "region"            : "US",
  "system_date_utc"   : "2017-08-29T23:58:38Z",
  "user_timezone"     : "America/Los_Angeles",
  "website_country"   : "US",
  "product_id"        : ["abc1", "def2"],
  "product_quantity"  : ["1", "2"],
  "product_unit_price": ["1240.00", "249.00"]
});

With regards to the default data items, if you are on the latest version of utag, these will be populated into the data object each time a view / link is called on the page. You won't see them populate into utag_data which is also what the Tag Companion uses. 

Additionally, I will make a note in pointing out that you will most likely need set the config option, noview.

window.utag_cfg_ovrd = window.utag_cfg_ovrd || {}; //Make sure we don't kill a previous decleration of the object
window.utag_cfg_ovrd.noview = true;

Adrian

[kbridges]

Thanks for the response @adrian_browning.  Sorry for the confusion, the code I pasted in was just pseudo-code.  The data being passed in the calls is structured in the way you have described.  Also, we are utilizing the "noview" config option you mentioned to supress the default calls.

I'm still only able to access just the data being passed in the utag.view( ) call when referencing variables in the Tealium data layer tab. Will I be able to get to all of the cookie, dom, etc. variables if I have the developer set utag_data on the page?  If not, does the developer need to always pass all of this as parameter data in the utag.view() and uta.link() calls?

One last note, the profile being used for this site is extremely old (ut4.002.201709252212),  We are planning to update this to a more current version in hopes that it will make for a smoother implementation.  I'm also wondering if this is causing the behavior I've outlined above?

Thanks again for your help.

[adrian_browning · Accepted solution]

@kbridges

With the v4.002 version, I think you do need to have the utag_data defined on the page, or at the very least in the first preloader, with a syntax like:

window.utag_data = {};

As soon as you upgrade you will not have to do the above workaround to get access to the dom et all elements.

Adrian

[craig_rouse]

@kbridges it's worth adding that 4.002 was a very early version, and it had a lot of limitations with regard to single-page apps; one of these being that load rules were not re-evaluated on utag.view or utag.link calls. This will likely cause significant problems in your deployment. I strongly urge you to consider upgrading before proceeding with any other aspect of the implementation. utag.js did not fully support SPA prior to version 4.20 without heavy modification.

[kbridges]

Thanks for the info @craig_rouse.  We created a copy of the old profile, and it appears that automatically upgraded the utag.js version to 4.44.xxxxx.  I am now able to access all of those variables.  

[kbridges]

Hi @adrian_browning.  As a follow-up...  I am having great difficulty getting javascript variables to map to eVars and props in appMeasurment.  The current solution (running utag.js v4.44.xxx) has utag.view() calls initiated (as outlined in your email above), each time a "virtual page view" happens.  I've got all of the elements being passed in the utag.view() associated with corresponding UDO variables defined in the data layer.  Most of these are mapped directly to an eVar or prop in the appMeasurement tag and that works great.  However, I also need to manipulate some of the data coming in, and then place it in it's own UDO variable to then map to an eVar or prop in the appMeasurement tag.  I am currently doing this with a Javascript code extension.  No matter what I try, I can't get the value from the JS extension to map correctly in the appMeasurement tag.  It's always showing up as blank or "unknown_unknown".  I've tried changing the scope of the extension, I've tried using utag_data.varName, utag.data.varName, b.varName, etc in my js code.  I've also scoped the extension every way I can think of, but nothing seems to allow me to map anything accurately to the appMeasurement tag except for those values passed in on the utag.view() call when the page loads.  I've put this in debug mode, and everything appears to work correctly when the extension executes.  Am I approaching this wrong? I also tried using a "set data value" extension, but this only worked for me when I used text.  When I reference other UDO variables via JS code, they always seem to map to ""  or "unknown_unknow".  We have this working on non-SPA sites with no problem.  Any advice?

[kbridges]

Nevermind.  I switched all utag.data.varName and utag_data.varName references in the js code to b.varName, and now it's working.  Thanks!

[kathleen_jo]

Great job on figuring it out @kbridges! Let us know if you still have questions.

[adrian_browning]

@kbridges

That's exactly what I would have told you to change your extension to use the b object.

Adrian