Javascript Extension Output - DOM Scraping - How to send to Tealium?

[audrey_poulin]

Basically, I'm wondering how to send a Javascript extension's output to Tealium.

I am trying to do some DOM scraping with the following Javascript code: 

window.coupons = function() {
var discounts = document.querySelector(".disclaimer");
var output = [];
try {
for (i=0, len=discounts.childNodes.length; i<len; i++) {
var e = discounts.childNodes[i].textContent.trim();
if (e.length>0) {
output.push(e);
}
};
return output;
} catch(e) {
return undefined;
}
}

This works perfectly in my console, however, I'm unclear on how to send my output so that it is available in data sources in Tealium.

[davidcreason]

@audrey_poulin Typically, when using a JavaScript Code extension you want to use a utag.link(); call in your function (or possibly utag.view()). This will take the data you've collected and fire the tags loaded on that page (that support link tracking). Make sure you have your extension scoped to DOM Ready since you're pulling data out of the DOM, if it runs too early your data may not yet be on the page. Below is an example. You could also wait to call utag.link(); later if you were collecting additional data for the tag. 

window.coupons = function () {
  var discounts = document.querySelector(".disclaimer");
  var output = [];
  try {
    for (i = 0, len = discounts.childNodes.length; i < len; i++) {
      var e = discounts.childNodes[i].textContent.trim();
      if (e.length > 0) {
        output.push(e);
        utag.link({
          "udo_variable_in_tealium1" : "value you want it to be",
          "udo_variable_in_tealium2" : "value you want it to be"
        })
      }
    };
    return output;
  } catch (e) {
    return undefined;
  }
}

You can find some additional information about utag.link() (and utag.view()) on this community article: utag.link() and utag.view(). As always, make sure to test before deploying into a production environment. If you were looking for something different let us know and we'll be glad to help. 

[brian_kranson]

@audrey_poulin

The question is not clear.  It is possible @davidcreason is correct, but I think what you are saying is that when already sending data to a Tag Vendor, scrape data from the page and add one more data source to this Tag Vendor call.

If I am correct then there could be a timing issue which would explain why the code works in the console and does not work when running within Tealium.

The data might show up until after Tealium sent the tracking data.

[audrey_poulin]

Well basically, I wanted to scrape the DOM to go get a value and send that value to Tealium as a data source so that it can be re-used by different tags.

I used @davidcreason's solution but added coupons() at the end to run the function.

Such as 

window.coupons = function () {
var discounts = document.querySelector(".disclaimer");
var output = [];
try {
for (i = 0, len = discounts.childNodes.length; i < len; i++) {
var e = discounts.childNodes[i].textContent.trim();
if (e.length > 0) {
output.push(e);
utag.link({
"coupon_confirmation" : output

})
}
};
return output;
} catch (e) {
return undefined;
}
}
coupons()
 

With that, my coupon_confirmation is populated correctly. 

Would that be the right way to go?

Thanks!

[brian_kranson]

@audrey_poulin

I don't think that is going to give the desired result.  Please open a case with your Tealium Account Manager have an Engineer go over the options with you.

Alternatively, you can use the following form to open a case.  When you open a case, you might want to give the URL to this community post as a reference.  Also when you open a case give the steps to reproduce the coupon being on the page.  Give them the website URL and the form steps they will have to fill out with a working coupon to be able to see the issue for themselves. Also if possible give the desired result for the Tagging Vendor(s) in question.

https://community.tealiumiq.com/t5/custom/page/page-id/support-contact-form

[audrey_poulin]

Thank you @brian_kranson, I will contact them!