Tealium Tags Integration with React Js

user_7561129 0
Viewed 1243

I am trying to integrate Tealium tags with our react.js based project; however, I do not happen to find any documentation regarding this matter? I would be appreciative if anybody could either provide me with some docs or examples as to how can this be done?

tealium reactjs
1 Answers

The Tealium Documentation has a section on Single Page Applications which is applicable to React. This answer references that documentation and adds a little from my experience.

Modify the Tealium Script

Firstly, you need to modify their global script slightly with the following two lines:

window.utag_cfg_ovrd = window.utag_cfg_ovrd || {};
window.utag_cfg_ovrd.noview = true;

This overrides the automatic page tracking (since there is no page navigation happening in a SPA). The complete script should look like (modifying the code in the installation guide):

<!-- Tealium Universal Data Object -->
<script type="text/javascript">
  var utag_data={
      "page_type"     : "section",
      "site_section"  : "men",
      "page_name"     : "Men's Fashion | Acme Inc.",
      "country_code"  : "US",
      "currency_code" : "USD"};
  window.utag_cfg_ovrd = window.utag_cfg_ovrd || {};
  window.utag_cfg_ovrd.noview = true
</script>

<!-- Tealium Universal Tag -->
<script type="text/javascript">
  (function(a,b,c,d) {
      a='//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/ENVIRONMENT/utag.js';
      b=document;c='script';d=b.createElement(c);d.src=a;
      d.type='text/java'+c;d.async=true;
      a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a)})();
</script>

Explicitly Handle Views

Since there is no page navigation, you will need to programmatically call utag.view() in places where you are doing routing:

window.utag.view({ variable1:"VARIABLE1 VALUE", variable2:"VARIABLE2 VALUE", variable3:"VARIABLE3 VALUE" });

Handle the Asynchronous Load of Utag

If you are using the default mode, the utag object is loaded asynchronously and your React code may attempt to call it before it has finished loading. You should have some logic guarding access until utag has properly loaded. Below is some example code:

Provide a Default Utag

// If you aren't worried about calling utag before it has loaded (e.g. user interactions)
// This will try to call Tealium but will just drop the event if utag is not loaded

export const utag = window.utag || { link: () => {}, view: () => {} };

// Usage: just use the exported utag, don't use the utag on window
utag.link({ ... })

Wrap Utag Calls in a Promise

// If the utag call could possibly happen before utag has loaded (e.g. page load)
// This will make the call as soon as utag has loaded (it still drops it if utag doesn't load in a certain amount of time)

export const withUtag = async () => {
  if (window.utag) return window.utag;
  let i = 0;
  while (i < 50) {
    await new Promise(resolve => setTimeout(resolve, 200));
    if (window.utag) return window.utag;
    i = i + 1;
  }
  return { link: () => {}, view: () => {} };
}

// Usage: Use the resolved utag object from the Promise
withUtag().then(utag => utag.view({ ... }))
user_20163530
Related