-
Notifications
You must be signed in to change notification settings - Fork 137
/
GoogleAnalytics.qunit.html
193 lines (174 loc) · 6.95 KB
/
GoogleAnalytics.qunit.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE HTML>
<html>
<head>
<title>Google Analytics</title>
<script type="text/javascript" src="../../../tests/qunit/qunit-bootstrap.js"></script>
<script type="text/javascript" src="../../../mwEmbedLoader.php"></script>
<script type="text/javascript" src="../../../docs/js/doc-bootstrap.js"></script>
<script type="text/javascript">
window[ 'trackFunc' ] = function (category, action, opt_label, opt_value) {
trackEventForTests(category, action, opt_label, opt_value);
if (typeof opt_value == 'undefined') {
opt_value = '';
}
$('#eventRowDesc').after(
$('<tr />').append(
$('<td />').text(category),
$('<td />').text(action),
$('<td />').text('' + opt_label),
$('<td />').text('' + opt_value)
)
)
// make sure ( if in an iframe ) the content size is insync:
if (parent && parent['sycnIframeContentHeight']) {
parent.sycnIframeContentHeight();
}
};
</script>
<!-- qunit-kaltura must come after qunit-bootstrap.js and after mwEmbedLoader.php and after any jsCallbackReady stuff-->
<script type="text/javascript" src="../../KalturaSupport/tests/resources/qunit-kaltura-bootstrap.js"></script>
<script type="text/javascript">
var testEventObject = {};
// We use this way of tracking events to show the events are being sent to google.
function trackEventForTests(category, action, opt_label, opt_value) {
var eventObj = { 'category': category, 'action': action, 'opt_label': opt_label, 'opt_value': opt_value }
// register event::
testEventObject[ action] = eventObj;
// trigger event
try {
$(testEventObject).trigger(action, eventObj);
} catch (e) {
// jquery track object method call issue
}
}
function jsKalturaPlayerTest(videoId) {
module("Google Analytics Events Test");
var kdp = $('#kaltura_player')[ 0 ];
asyncTest("mediaReady event sent", function () {
var runTest = function (testEvent) {
equal(testEvent.action, "mediaReady", "mediaReady event was sent");
var entryId = testEvent.opt_label.split('|')[1];
equal(entryId, "0_uka1msg4", "Label entryId set to actual entry id");
start();
}
if (testEventObject['mediaReady']) {
runTest(testEventObject['mediaReady'])
} else {
$(testEventObject).bind('mediaReady', function (event, testEvent) {
runTest(testEvent)
});
}
});
asyncTest("doPlay, doPause and doSeek events sent", function () {
$(testEventObject).bind('doPlay', function (event, testEvent) {
equal(testEvent.action, "doPlay", "doPlay event was sent");
});
$(testEventObject).bind('doPause', function (event, testEvent) {
equal(testEvent.action, "doPause", "doPause event was sent");
});
$(testEventObject).bind('doSeek', function (event, testEvent) {
equal(testEvent.action, "doSeek", "doSeek event was sent");
equal(testEvent.opt_value, "10", "opt_value doSeek set to seek time");
start();
});
kdp.sendNotification('doPlay');
setTimeout(function () {
kdp.sendNotification('doPause');
kdp.sendNotification('doSeek', 10);
}, 1000);
});
}
</script>
</head>
<body>
<h2> Google Analytics </h2>
<br/>
<div id="kaltura_player" style="width:400px;height:330px"></div>
<div id="kdoc-more-desc"><br>This google analytics example highlights custom tracking events. Notice the
"related" event within the GA log when selecting a related video.<br>
Time spent buffering tracked via <a href="../../../docs/api#video.buffer.lastBufferDuration">lastBufferDuration</a></div>
<script>
// Use the configured analtyics ua or hard code the player.kaltura.com acocunt:
var googleAnalyticsAccountId = mw.getConfig( 'Kaltura.PageGoogleAnalytics' ) ? mw.getConfig( 'Kaltura.PageGoogleAnalytics' ): "UA-2078931-34";
kWidget.featureConfig({
'targetId': 'kaltura_player',
'wid': '_243342',
'uiconf_id': '12905712',
'entry_id': '0_uka1msg4',
'flashvars': {
'googleAnalytics': {
'plugin': true,
'relativeTo': 'video',
'position': 'before',
'trackEventMonitor': 'trackFunc',
'urchinCode': googleAnalyticsAccountId,
'anonymizeIp': false,
'customEvent': 'doPlay,relatedVideoSelect,playerReady,NoSourcesCustomError,bufferEndEvent,mediaError,embedPlayerError',
'trackingCategory': "Kaltura Video Events",
'optionalLabel': "{mediaProxy.entry.referenceId}|{mediaProxy.entry.name}|{mediaProxy.entry.id}|{configProxy.kw.id}|{configProxy.kw.uiConfId}",
'doPlayCategory': "Custom Events",
'doPlayAction': "playing",
'doPlayValue': "1",
'doPlayLabel': "My custom play label: {mediaProxy.entry.id}",
// Enables us to track what entries are being clicked on from related videos
'relatedVideoSelectCategory': 'Related Fulfillment',
'relatedVideoSelectAction': "{related.selectedEntryId}",
// Enables us to track what tags are assigned to the related video
'playerReadyCategory':'My entry tags',
'playerReadyAction':'{mediaProxy.entry.tags}',
// generic media error triggered against error display:
'mediaErrorCategory' : "Error events",
'mediaErrorAction' : " MediaError event",
'embedPlayerErrorCategory': "Error events",
'embedPlayerErrorAction': "Streaming Error",
// specific error reporting:
'NoSourcesCustomErrorCategory': "Error events",
'NoSourcesCustomErrorAction': "No Sources Error",
'bufferEndEventCategory': "Buffer events",
'bufferEndEventAction': "bufferEnd",
'bufferEndEventValue': "{video.buffer.lastBufferDurationMs}",
'sendRefId': true
},
'related': {
plugin: true,
parent: "topBarContainer",
playlistId: '0_q79jh71b',
storeSession: true
}
},
'readyCallback': function (playerId) {
var kdp = document.getElementById(playerId);
// clear the text box:
$('#gAnalyticsLog tr:not(#eventRowDesc)').remove();
$('.changeMedia').click(function () {
kdp.sendNotification('changeMedia', {'entryId': '1_sf5ovm7u' });
return false;
})
$('.changeMediaInvalid').click(function(){
kdp.sendNotification('changeMedia', {'entryId': '1_invalid' });
return false;
});
$('.mediaError').click(function(){
var embedPlayer = $( '#' + playerId + '_ifp' ).contents().find('#' + playerId )[0];
embedPlayer.showPlayerError();
embedPlayer.showErrorMsg({'title': "Forced Demo Error", 'message': "Forced Demo media error."});
return false;
});
}
})
</script>
<br>
<a class="mediaError" href="#">Trigger media Error</a> <br>
<a class="changeMedia" href="#">Change Media</a> <br>
<a class="changeMediaInvalid" href="#">Change to invalid entry</a><br><br>
<i>Google Analytics events: </i><br/>
<table id="gAnalyticsLog" border="1" width="90%">
<tr id="eventRowDesc">
<td>Category</td>
<td>Action</td>
<td>Label (Clip Title | Entry Id | Widget Id)</td>
<td>Value</td>
</tr>
</table>
</body>
</html>