+ Start a Discussion
Justin LeungJustin Leung 

How to use Tealium tags in Community Builder sites

I'm having have few related issues with analytics and Community Builder sites (using the Koa template, but I assume affects other templates like Napili also):

1. The way the Community Builder renders the pages for articles, is it dynamically (via Javascript) assigns the HTML Title for the page to the name of the article.

Google Analytics is showing the page view, but the Page Title is showing "Article Detail", the default title of the page that dynamically renders the articles.

It seems like the timing in which the page view is sent to Google Analytics, happens before Salesforce code to apply the page title is set.  

2. We're use Tealium Tag Management to track analytics, which forwards the data to Google Analytics.  Tealium suggests to put in their code right after the opening <body> tag.

<script type="text/javascript">
var utag_data = {};
<script src="//pathToTealium.js" type="text/javascript"></script>

There doesn't seem to be a way to get a Community Builder page to render with this code anywhere in the <body> tag.  If I build a Lightning Component with this code, and insert it at the top of the page or anywhere on the page, it pushes the code to the <head> automatically.

If I add the tracking to Community Builder > Settings > Advanced > Head Markup, it puts the code within <head> and it works, except the same issue above occurs with the page titles not showing the article's title.  I'm hoping to be able to get this to render in the <body> tag as we may be able to adjust things in Tealium to send the proper analytics, but it doesn't look like we can if it's in the <head> tags.

Note that LockerService will no longer allow us to put this kind of Javascript code in the Head Markup soon.

I've also tried using the native Community Builder method of adding the Google Analytics Id in Community Builder > Settings > Advanced > Google Analytics, and the same problem (Page Title of articles not correct) occurs.

Any ideas on either of these?
Dev BoorlaDev Boorla
1. I am yet to find out.
2. Create a Lightning Component. Declare the InIt handler and add the above code in the component's Controller (.js)

Justin LeungJustin Leung
I should have mentioned, we've tried to add the Tealium script in a few different ways:

1. Added as HTML code in an Lightning component as per your suggestion.  When the page renders, it pushes the Tealium code to the <head> and still runs into the same problem where the page title is not logged

2. Added via a Lightning component with this code:
<ltng:require scripts="//pathToTealium.js" />

This gave us a Javascript errror: "XMLHttpRequest cannot load https://tags.tiqcdn.com/utag/active/activesupport/prod/utag.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://support.activenetwork.com' is therefore not allowed access."

Unfortunately we can't control the Tealium side to add our domain to the CORS Whitelist Origin.
Dev BoorlaDev Boorla
Interesting and thanks for sharing the information. We have a similar requirement but not yet fully tested. I will get back to you. 

Kyle BrierleyKyle Brierley
Kyle from Tealium here - curious if this was ever resolved or you found a solution?
Mike Slade 1Mike Slade 1

Hey guys, I'm not sure why there isn't more chatter about this, but it looks like the way that you do this is use the header markup in the Settings->

Advanced Options to add the third party script.  I was able to load the Tealium javascript that way.