Using Heap, Google Analytics, and Trialfire in HTML5 output

This forum is for all Flare issues not related to any of the other categories.

Using Heap, Google Analytics, and Trialfire in HTML5 output

Postby aharper12 on Thu Jan 09, 2020 3:00 pm

Hello! We have an HTML5 output, for an EN and a FR project. We want to be able to collect analytics, using Google Analytics, Trialfire, and Heap. However, we are having trouble getting the code(s) in all the right places.

Right now, we have Google analytics code in our masterpages (we have 3 different types of masterpages, for our home page, our landing pages, and our topic pages) and our script.js file.

It looks like this in our master pages:
<head>
<script> (function(i, s, o, g, r, a, m){i['GoogleAnalyticsObject'] = r;i[r] = i[r] || function(){ (i[r].q = i[r].q || []).push(arguments)},i[r].l = 1 * new Date();a = s.createElement(o), m = s.getElementsByTagName(o)[0];a.async = 1;a.src = g;m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-123456789-1', 'auto'); ga('send', 'pageview');</script>
</head>

It looks like this in our scripts.js file:
// Google Analytics
(function(i, s, o, g, r, a, m){i['GoogleAnalyticsObject'] = r;i[r] = i[r] || function(){
(i[r].q = i[r].q || []).push(arguments)},i[r].l = 1 * new Date();a = s.createElement(o),
m = s.getElementsByTagName(o)[0];a.async = 1;a.src = g;m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

//ga('create', 'UA-XXXXX-Y', 'auto');
//ga('send', 'pageview');

Which seems to be working correctly. The trouble begins when we start to layer in TrialFire and Heap.

When we add Trialfire, I get an error in IE that our content has become 'unsecure' - our TrialFire code looks like this: <script src="//cdn.trialfire.com/tf.js"></script> <script>Trialfire.init('code');</script> and I added the same to the scripts.js file.

When we try to put Heap in, I can't even put in the script, into the master pages, because it says there is a syntax error. The sample Heap script is:
<script type="text/javascript">
window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
heap.load("YOUR_APP_ID");
</script>

Has anyone had any luck trying to use any/all 3 of these setups for analytic collecting and can point me in various/helpful directions?

Thank you!
Adriana
aharper12
Propeller Head
 
Posts: 23
Joined: Wed May 01, 2019 12:13 pm

Re: Using Heap, Google Analytics, and Trialfire in HTML5 out

Postby Dave Lee on Fri Jan 10, 2020 12:41 am

GA

The code you posted is the old format of the 'ga' code that Google chanegd in 2017. I'd recommend updating it to the current 'gtag' code, because the old 'ga' code may stop working one day.
See: viewtopic.php?f=13&p=136831#p136808

Trialflare
Think that's purely a Trialflare issue rather than anything to do with Flare - maybe ask their support/forums.

Heap
You're getting syntax errors because the code isn't formatted correctly for use in HTML. It contains at least one "<" character.

If you want to put JS code in a Flare topic/master page, use the XML Editor (rather than paste directly in Text Editor), and select Insert > Script. That will reformat the script for you.

Anyway, I'd suggest putting the code in a separate JS file instead (minus script tags), and have a link to that JS file from the master page. It saves having multiple copies of the same code everywhere.
Dave Lee
Master Propellus Maximus
 
Posts: 5789
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Using Heap, Google Analytics, and Trialfire in HTML5 out

Postby aharper12 on Fri Jan 10, 2020 6:55 am

Thank you! Do we put the same code in both our scripts.js file and the master pages (for the Google analytics code):

So I now have this in my scripts.js file:
// Google Analytics
<!-- Global site tag(gtag.js) - Google Analytics -->
<script async src = "https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script >
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-XXXXXX-X');
</script>
//ga('create', 'UA-XXXXX-Y', 'auto');
//ga('send', 'pageview');


And I have this in the head of all my master pages:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-XXXXXX-X');
</script>



TIA!
Adriana
aharper12
Propeller Head
 
Posts: 23
Joined: Wed May 01, 2019 12:13 pm

Re: Using Heap, Google Analytics, and Trialfire in HTML5 out

Postby Dave Lee on Fri Jan 10, 2020 8:26 am

Nope, that's not what I suggested.

I only suggested to put the Heap code in a separate JS file.

The Google code you have in your master page looks ok. Remove it from your JS file.
Dave Lee
Master Propellus Maximus
 
Posts: 5789
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Using Heap, Google Analytics, and Trialfire in HTML5 out

Postby aharper12 on Sat Jan 11, 2020 6:17 am

Ah! Ok, thank you. I made those changes and both Heap and Google and now working. Awesome! Thanks so much!

The only one left we have to figure out is our TrialFire script: <script src="https://cdn.trialfire.com/tf.js"></script> <script>Trialfire.init('TRIALFIRECODE');</script>. Although it is going into Flare no problem, it doesnt seem to be tracking. We have put the script into all 3 of our master pages. Has anyone ever used Trialfire for analytics tracking, with Madcap?

Adriana
aharper12
Propeller Head
 
Posts: 23
Joined: Wed May 01, 2019 12:13 pm

Re: Using Heap, Google Analytics, and Trialfire in HTML5 out

Postby aharper12 on Mon Jan 13, 2020 7:06 am

For what it's worth, here is a screenshot of what is happening when the website is rendering... The tf.js script is included but the Traiflire.init is above it and wrapped in a CDATA. Any thoughts or suggestions are welcome!
Trialfire_render.jpg


Adriana
You do not have the required permissions to view the files attached to this post.
aharper12
Propeller Head
 
Posts: 23
Joined: Wed May 01, 2019 12:13 pm

Re: Using Heap, Google Analytics, and Trialfire in HTML5 out

Postby Dave Lee on Tue Jan 14, 2020 2:03 am

Rather than put the trailflare init script inside the head, put it inside the body before the closing </body> tag.
Dave Lee
Master Propellus Maximus
 
Posts: 5789
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Using Heap, Google Analytics, and Trialfire in HTML5 out

Postby aharper12 on Tue Jan 14, 2020 6:47 am

Thanks Dave. We actually found another work-around, late last night - a script that looks like this is working as well:

<script>
var s = document.createElement('script');
s.src = 'https://cdn.trialfire.com/tf.js';
s.onload = function () { Trialfire.init('TRIALFIRECODE'); };
document.head.appendChild(s);
</script>

Hopefully all this can help someone else at some point! Thanks to everyone fro their input and feedback.

Adriana
aharper12
Propeller Head
 
Posts: 23
Joined: Wed May 01, 2019 12:13 pm


Return to Flare's General Discussion

Who is online

Users browsing this forum: No registered users and 6 guests