Analytics: Events tracking for <object>

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Analytics: Events tracking for <object>

Post by jsandora »

I'm trying to set up Events tracking using our existing Google Analytics for mp4 videos hosted within our help systems.

My company doesn't currently have a central hosting solution for videos, so we have to upload them with our help systems. When I add videos to a topic, it's inserted as an <object>. I've so far been unsuccessful at tracking views/clicks for these videos.

I have the code set up as following:

Code: Select all

<object MadCap:HTML5Video="true" src="../../Resources/Videos/JobDescription_editMangers.mp4" MadCap:Param_controls="true" MadCap:Param_muted="false" MadCap:Param_loop="false" MadCap:Param_autoplay="false" onClick="ga('send','event','video','play','JobDescription_editMangers');">
I know that version of the Analytics code works since I'm receiving events for PDF downloads, set up the same way in another topic.

Does Event tracking not work with <object> items? Am I missing something else?
Software Documentation Specialist (but really, Tech Writer)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Analytics: Events tracking for <object>

Post by NorthEast »

jsandora wrote:Does Event tracking not work with <object> items? Am I missing something else?
First, the object tag in the source will be replaced by a video tag in the HTML5 output. So there's no object tag.

Second, I'm not sure if onclick will work. Even if it does, you probably don't want to record every click (play, pause, volume, etc.), as it won't give you meaningful analytics.

I'd suggest looking at video events (https://www.3schools.com/tags/ref_av_dom.asp), and only send the GA event when someone clicks play (https://www.w3schools.com/tags/av_event_play.asp).

That's what I do in my projects. I also check how long people watch videos, e.g. send events at 25% at 75%.
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Analytics: Events tracking for <object>

Post by jsandora »

Dave Lee wrote:That's what I do in my projects. I also check how long people watch videos, e.g. send events at 25% at 75%.
Any chance you could post your code snippet for this as it appears in Flare?

I'm trying to use the syntax and structure from those links, but not having any luck getting it to work so far …
Software Documentation Specialist (but really, Tech Writer)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Analytics: Events tracking for <object>

Post by NorthEast »

The full code is probably a bit too complicated - but here's starter example for recording the play event.
It uses jQuery, and the events are sent using gtag() rather than ga(). If you're still using the older ga() function, then send the event using the ga() event format instead.

Code: Select all

$(document).ready(function(){


$("video").one("play", function (e) {

   /* insert code to send GA event here */
			gtag('event', 'View start', {
				'event_category': 'Video',
				'event_label': location.href
			});	

});

});
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Analytics: Events tracking for <object>

Post by jsandora »

No luck yet. Here's where I'm at now with the code:

Code: Select all

<object id="Registration" MadCap:HTML5Video="true" src="../../Resources/Videos/PerformanceManager_Registration.mp4" style="border: 1px solid rgb(128, 128, 128); width: 80%;" MadCap:Param_controls="true">
</object>

<script>
	$(document).ready(function(){
		$("video").one("play", function (e) {
			onClick="ga('send','event','video','play','Registration');";  
		});
	});
</script>
Any suggestions as to where I'm going wrong? Does the <script> need to reside within the <object> tag?
Software Documentation Specialist (but really, Tech Writer)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Analytics: Events tracking for <object>

Post by NorthEast »

Why have you inserted the ga() code inside an onClick="..."; ?
The code doesn't have an onClick.

Just replace the gtag() function with your ga() code.
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Analytics: Events tracking for <object>

Post by jsandora »

Success! Seems to work now. Dave Lee saves my bacon once again.

Now, any chance you can share the code that tracks percentage views? :)
Software Documentation Specialist (but really, Tech Writer)
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Analytics: Events tracking for <object>

Post by jsandora »

Okay, spoke too soon unfortunately. When I implemented the code as suggested, it worked great - for the ONE video on the page that I tagged to test everything. Problem is that there are multiple videos on the same page. So when I added the code for each video on the page, I got a "play" event for EVERY video each time ANY video was played. One video view resulted in an event for all six videos on the page.

One of our devs suggested I replace the id in the script with the following and place it in the header:

Code: Select all

e.target.id
So the <script> in the header was this:

Code: Select all

<script>
	$(document).ready(function(){
		$("video").one("play", function (e) {
			ga('send','event','video','play',e.target.id);  
		});
	});
</script>
However, that didn't seem to send ANY event to Analytics. We moved that <script> to just above the closing </body> tag, and now we're getting EVENTS logged when videos are played, but those events aren't associating with any labels (event count goes up, but specific label counts do not).

Suggestions??
Software Documentation Specialist (but really, Tech Writer)
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Analytics: Events tracking for <object>

Post by jsandora »

UPDATE: Apparently Flare is stripping out the id="xxxx" I placed in the <object> tag to identify the video. That's why I'm getting events, but no association with specific videos.

Any suggestions on how to keep the id in there?
Software Documentation Specialist (but really, Tech Writer)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Analytics: Events tracking for <object>

Post by NorthEast »

I only have one video per page, so never came across that issue.
jsandora wrote:UPDATE: Apparently Flare is stripping out the id="xxxx" I placed in the <object> tag to identify the video. That's why I'm getting events, but no association with specific videos.

Any suggestions on how to keep the id in there?
Not really, but if you can't use the ID, why not send the video's filename with the event?
That'll presumably do the same job, and tell you what video was played.

Apart from that, you could put the video inside a div with an ID - but that's a bit of a kludge.
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Analytics: Events tracking for <object>

Post by jsandora »

Dave Lee wrote: Not really, but if you can't use the ID, why not send the video's filename with the event?
That'll presumably do the same job, and tell you what video was played.
Just tried this using e.target.src, but not able to pull in the filename. Still get events, but no associated labels.

The dev believes that's because the src isn't included in the actual <video> tag when Flare builds the help. The final video code looks as such:

Code: Select all

<video style="border: 1px solid rgb(128, 128, 128); width: 80%;" controls="" class="_0">
It seems we're limited to pulling what's in the <video> tag. Not sure how to get filename in there.
Software Documentation Specialist (but really, Tech Writer)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Analytics: Events tracking for <object>

Post by NorthEast »

jsandora wrote:
Dave Lee wrote: Not really, but if you can't use the ID, why not send the video's filename with the event?
That'll presumably do the same job, and tell you what video was played.
Just tried this using e.target.src, but not able to pull in the filename. Still get events, but no associated labels.

The dev believes that's because the src isn't included in the actual <video> tag when Flare builds the help. The final video code looks as such:

Code: Select all

<video style="border: 1px solid rgb(128, 128, 128); width: 80%;" controls="" class="_0">
It seems we're limited to pulling what's in the <video> tag. Not sure how to get filename in there.
The filename is in the <source> tag which is inside the <video> tag, so you can get that from there.

Code: Select all

<video controls="" class="_video_0">
   <source src="Filename.mp4" type="video/mp4"></source>
</video>
Post Reply