[WT] Tracking Bug - Verify that automatic link tracking will let us report out on Video views/page

RESOLVED FIXED

Status

RESOLVED FIXED
7 years ago
6 years ago

People

(Reporter: lforrest, Assigned: brad.gross)

Tracking

Details

(Reporter)

Description

7 years ago
We'd like to know how many people watch the brand video on the following page. 

Let's leverage automatic link tracking to be able to record video views across the site. 

Specifically on the following pages:
First Run
What's New
A new "learn more" page in dev

Laura fill in "blocks" bugs here.
(Reporter)

Comment 1

7 years ago
Three videos that are top of mind will or already do appear on:

http://www.mozilla.org/en-US/firefox/8.0/firstrun/ - Product Page profile 5% sample
http://www.mozilla.org/en-US/firefox/9.0/whatsnew/ - in design, see preview here Bug 698854 and implementation bug here Bug 698850.
URL TBD - in design, here: Bug 708049, implementation bug TBD (see Bug 708049 for what that will be)
Blocks: 698850
(Assignee)

Comment 2

7 years ago
This is a general solution for tracking video plays:

Assumption/Requirement:
 - automatic link tracking is turned on (_tag.trackevents=true;)

Update Mozilla.VideoControl.prototype.drawControl in mozilla-video-tools.js such that the 'mozilla-video-control-overlay' anchor tag specifies the video.id parameter '<a ...>'+this._video.id+'</a>' defined in the <video> tag on the corresponding html page.  

The goal here is to provide a general solution for tracking video plays (clicks on the 'mozilla-video-control-overlay').  By specifying the video name, Webtrends will be able to distinguish between different videos on the reporting end.  

Please see the description below:

Old:

Mozilla.VideoControl.prototype.drawControl = function()
{
  this.control = $('<a href="#" class="mozilla-video-control-overlay" style="opacity: 0" />');

  // Show the click-to-play button. In the future, this may be changed
  // to show the click-to-play button based on media events like the
  // hiding is done.
  if (this._video.paused || this._video.ended) {
    this.show();
  }
...

new:

Mozilla.VideoControl.prototype.drawControl = function()
{
  this.control = $('<a href="#" class="mozilla-video-control-overlay" style="opacity: 0">'+this._video.id+'</>');

  // Show the click-to-play button. In the future, this may be changed
  // to show the click-to-play button based on media events like the
  // hiding is done.
  if (this._video.paused || this._video.ended) {
    this.show();
  }
...

The video tag:
<video
	id="video" <-------
	width="640"
	height="360"
	controls="controls" preload="metadata"
	poster="/img/covehead/video/poster-brand.jpg"
	src="http://videos-cdn.mozilla.net/brand/Mozilla_Firefox_Manifesto_v0.2_640.webm">

</video>
(Reporter)

Updated

7 years ago
Blocks: 709986, 709987
Brad, this code snippet you provided (very helpful, by the way, thanks),  appears to put the video ID in the actual content of the anchor tag, making it visible to the user:

<a href="#" class="mozilla-video-control-overlay" style="opacity: 0">'+this._video.id+'</>

Could we append an ID to the anchor instead? Something that was a variation of the video ID? Something like:

<a href="#" class="mozilla-video-control-overlay" style="opacity: 0" id="anchor_videoID" />
(Assignee)

Comment 4

7 years ago
Well, the automatic link tracking js keys on the actual content of the anchor tag and assigns it to the Webtrends parameter WT.ti.  The alternatives are to explicitly call dcsMultiTrack from the embedded click function (see below) or modify the base Webtrends js that the entire mozilla.org site accesses.  The benefit of the above method is that it doesn't reference any Webtrends code directly. 

  this.control.click(function(event) {
    event.preventDefault();

    if (that.semaphore || !that.videoCanPlay()) {
      return;
    }

    that.semaphore = true;
    // rewind the video
    if (that._video.ended) {
      that._video.currentTime = 0;
    }
    that._video.play();
    //dcsMultiTrack('DCS.dcssip', 'www.mozilla.org', 
    //		  'DCS.dcsuri', '/en-US/firefox/8.0/firstrun/', 
    //		  'WT.ti', 'Video: <title>, 
    //		  'WT.clip_n', <title>, 
    //		  'WT.clip_ev', 'start', 
    //		  'WT.dl', '98');
  });
Thanks for the quick reply. Would it work if we use the original proposed technique (ID in the anchor text), but wrap the ID in a <span> so we can hide it?
(Assignee)

Comment 6

7 years ago
Let me test that.
(Assignee)

Comment 7

7 years ago
The following appears to be working on my end:

...<span style="visibility:hidden">'+this._video.id+'</span>...
(Assignee)

Comment 8

7 years ago
The following appears to be working on my end:

...<span style="visibility:hidden">'+this._video.id+'</span>...
This is implemented in trunk in r98945. Note that IE users see a Flash video player, and this script will not apply to them.
(Reporter)

Updated

7 years ago
Blocks: 711245
(Reporter)

Comment 10

7 years ago
Thanks! Closing this bug.
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → FIXED
Component: Webtrends → Web Analytics
Product: Websites → Websites
You need to log in before you can comment on or make changes to this bug.