Skip to content

Commit

Permalink
Version 1.1
Browse files Browse the repository at this point in the history
* View counts tracking
* Fixes for playButton style
* Videos inline autoplay for iOS 10
  • Loading branch information
koshka committed Sep 2, 2016
1 parent e649fbe commit 91b5517
Show file tree
Hide file tree
Showing 5 changed files with 254 additions and 21 deletions.
1 change: 1 addition & 0 deletions .gitignore
@@ -1,3 +1,4 @@
node_modules
.DS_Store
dist/
.idea/
1 change: 1 addition & 0 deletions README.md
Expand Up @@ -21,6 +21,7 @@ limitations under the License.

- 0.1: Initial revision
- 1.0: Fixes to initialization, cleaned up UI, support for mobile browsers
- 1.1: Support for autoplaying looping MP4 on iOS 10, GIF view count analytics


Embed script to generate gfycat embeds on 3rd party websites.
Expand Down
191 changes: 191 additions & 0 deletions web/js/analytics.js
@@ -0,0 +1,191 @@
/**
* Copyright 2014-2016 Gfycat, Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS-IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

var GfyAnalytics = function() {
var utc = 0, stc = 0;

if (typeof ga !== 'undefined') {
ga('create', 'UA-40130883-1', 'auto', 'gfyTracker');
} else {
ga = undefined;
}

function generateUUID() {
var b = new Date().getTime();
var a = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(e) {
var d = (b + Math.random() * 16) % 16 | 0;
b = Math.floor(b / 16);
return (e == 'x' ? d : (d & 3 | 8)).toString(16);
});

return a;
}

function createCookie(c, d, e) {
var a = '';
if (e) {
var b = new Date();
b.setTime(b.getTime() + (e * 1000));
a = '; expires=' + b.toGMTString();
}

document.cookie = c + '=' + d + a + ';domain=.gfycat.com;path=/';
}

function readCookie(b) {
var e = b + '=';
var a = document.cookie.split(';');
for (var d = 0; d < a.length; d++) {
var f = a[d];
while (f.charAt(0) == ' ') {
f = f.substring(1, f.length);
}

if (f.indexOf(e) === 0) {
return f.substring(e.length, f.length);
}
}

return null;
}

function generateUserSessionID() {
if (!utc) {
utc = readCookie('_utc');
if (!utc) {
utc = generateUUID();
createCookie('_utc', utc, 31536000); // 1 year
}
}

if (!stc) {
stc = readCookie('_stc');
if (!stc) {
stc = generateUUID();
createCookie('_stc', stc, 1800); // 0.5 hour
}
}
}


function sendViewCount(tx, data) {
if (navigator.doNotTrack) return;
generateUserSessionID();

var _utc = encodeURIComponent(utc);
var _stc = encodeURIComponent(stc);
var _tx = tx;
var viewDataString = "";
for (var key in data) {
if (data[key]) {
viewDataString += ('&' + key + '=' + data[key]);
}
}

var url = 'https://pixel.gfycat.com/pix.gif?tx=' + _tx + viewDataString +
'&utc=' + _utc + '&stc=' + _stc + '&rand=' + Math.random()*100000;
var xhr = createCORSRequest('GET', url);
if (!xhr) throw new Error('CORS is not supported in your browser');

xhr.onerror = function() {
console.log('CORS Error');
};
xhr.send();

if (ga) {
ga('gfyTracker.send', 'pageview', location.href);
}
}

function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ('withCredentials' in xhr) {
xhr.open(method, url, true);
}
/* IE support */
else if (typeof XDomainRequest != 'undefined') {
xhr = new XDomainRequest();
xhr.open(method, url);
}
/* CORS unsupported */
else {
xhr = null;
}
return xhr;
}

function encodeParameters(data) {
return Object.keys(data).map(function(key) {
return [key, data[key]].map(encodeURIComponent).join("=");
}).join("&");
}

/*
sendEvent({
user: 'abc',
video_id: 'some video'
});
*/
var sendEvent = function(kv) {
if (navigator.doNotTrack) return;
generateUserSessionID();

var ref = 'https://www.gfycat.com';
if (typeof document.referrer != 'undefined' && document.referrer.length > 1) {
ref = document.referrer;
}

kv.utc = utc;
kv.stc = stc;
kv.ref = ref;

var i = new Image();
i.src = 'https://metrics.gfycat.com/pix.gif?' + encodeParameters(kv);


if (ga && kv.hasOwnProperty('event')) {
ga('gfyTracker.send', 'event', 'gfyEvent', kv.event);
}
};

var sendEventWithCallback = function(kv, callback) {
if (navigator.doNotTrack) return;
generateUserSessionID();

var ref = 'https://www.gfycat.com';
if (typeof document.referrer != 'undefined' && document.referrer.length > 1) {
ref = document.referrer;
}

kv.utc = utc;
kv.stc = stc;
kv.ref = ref;

var i = new Image();
i.src = 'https://metrics.gfycat.com/pix.gif?' + encodeParameters(kv);


if (ga && kv.hasOwnProperty('event')) {
ga('gfyTracker.send', 'event', 'gfyEvent', kv.event, {'hitCallback': callback});
}
};

return {
sendEvent: sendEvent,
sendEventWithCallback: sendEventWithCallback,
sendViewCount: sendViewCount
};
}();
2 changes: 1 addition & 1 deletion web/js/gfyCollection.js
Expand Up @@ -28,7 +28,7 @@
* and re-initialize them or interact with them
* as desired.
*/
var gfyCollection = function () {
var gfyCollection = function() {

var collection = [],
gfyClass = "gfyitem";
Expand Down
80 changes: 60 additions & 20 deletions web/js/gfyObject.js
Expand Up @@ -139,27 +139,30 @@ var gfyObject = function (gfyElem) {

function createPlayButton() {
var playButton = document.createElement('div');
var arrowHtml = '<div style="width:0;height:0;margin-left:4px;' +
'border-style:solid;border-width: 17px 0 17px 29px;' +
'border-color: transparent transparent transparent #ffffff;"></div>';

playButton.className = "play-button";
playButton.style.color = "#fff";
playButton.style.fontSize = "40px";
playButton.style.lineHeight = "60px";
playButton.style.marginTop = "-39px";
playButton.style.position = "relative";
playButton.style.display = "none";
playButton.style.top = "50%";
playButton.style.border = "1px solid rgba(100, 100, 100, .3)";
playButton.style.borderRadius = "50%";
playButton.style.boxSizing = "border-box";
playButton.style.marginTop = "-39px";
playButton.style.width = "75px";
playButton.style.height = "75px";
playButton.style.padding = "9px 0 0 7px";
playButton.style.justifyContent = "center";
playButton.style.alignItems = "center";
playButton.style.boxSizing = "border-box";
playButton.style.border = "1px solid rgba(100, 100, 100, .3)";
playButton.style.borderRadius = "50%";
playButton.style.backgroundColor = "rgba(255,255,255,.3)";
playButton.style.textShadow = "#333 0px 0px 1px";
playButton.innerHTML = "&#9654;";
playButton.style.display = "none";
playButton.style.color = "#fff";
playButton.style.userSelect = "none";
playButton.style.webkitUserSelect = "none";
playButton.style.msUserSelect = "none";
playButton.style.MozUserSelect = "none";
playButton.innerHTML = arrowHtml;

overlay.appendChild(playButton);
return playButton;
}
Expand All @@ -170,6 +173,8 @@ var gfyObject = function (gfyElem) {
if (opt.autoplay) vid.autoplay = true;
vid.loop = true;
vid.controls = false;
vid.setAttribute('playsinline', '');
vid.setAttribute('muted', '');
vid.style.width = '100%';
if (opt.responsive) {
if (opt.controls) {
Expand All @@ -192,6 +197,8 @@ var gfyObject = function (gfyElem) {
} else {
vid.attachEvent("onloadedmetadata", vidLoaded);
}
vid.addEventListener('play', onPlay);
vid.addEventListener('pause', onPause);
}

function setVideoSources() {
Expand Down Expand Up @@ -315,6 +322,7 @@ var gfyObject = function (gfyElem) {
gfyRootElem.style.position = "relative";
gfyRootElem.style.padding = 0;
gfyRootElem.style.fontSize = 0;
sendAnalytics(gfyId);

// call gfycat API to get info for this gfycat
loadJSONP("https://gfycat.com/cajax/get/" + gfyId, function (data) {
Expand Down Expand Up @@ -547,13 +555,9 @@ var gfyObject = function (gfyElem) {

//handle pause via closing full screen on iOS
if (window.addEventListener) {
vid.addEventListener('webkitendfullscreen', function () {
pause();
});
vid.addEventListener('webkitendfullscreen', pause);
} else if (window.attachEvent) {
vid.attachEvent('webkitendfullscreen', function () {
pause();
});
vid.attachEvent('webkitendfullscreen', pause);
}
}

Expand Down Expand Up @@ -595,17 +599,24 @@ var gfyObject = function (gfyElem) {

function play() {
if (vid.paused) vid.play();
setCtrlsPlaying();
if (vid.paused) setCtrlsPaused();
}

function pause() {
if (!vid.paused) vid.pause();
}

function onPlay() {
setCtrlsPlaying();
}

function onPause() {
setCtrlsPaused();
}

function showPlayButton() {
if (overlay && overlay.button) {
overlay.button.style.display = "inline-block";
overlay.button.style.display = "inline-flex";
}
}

Expand Down Expand Up @@ -634,7 +645,7 @@ var gfyObject = function (gfyElem) {
ctrlFaster.style.width = "8px";
ctrlFaster.onclick = stepForward;
ctrlSlower.onclick = stepBackward;
vid.pause();
pause();
setVideoSources();
// Swap video source tags for reverse encoded files
var mp4src = byClass("mp4source", vid)[0];
Expand Down Expand Up @@ -698,6 +709,35 @@ var gfyObject = function (gfyElem) {
return gfyRootElem;
}

function sendAnalytics() {
var url = "https://gfycat.com/cajax/getTx/" + gfyId;

var request = new XMLHttpRequest();
request.open("GET", url);
request.send();

request.onreadystatechange = function () {
if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
if (request.response) {
var response = JSON.parse(request.response);
if (!response.tx) return;
var ref = "";
if (typeof document.referrer !== "undefined" && document.referrer) {
ref = encodeURIComponent(document.referrer);
} else {
ref = location.href;
}
var data = {
ref: ref,
module: 'jsEmbed',
device_type: isMobile ? 'mobile' : 'desktop'
};
GfyAnalytics.sendViewCount(response.tx, data);
}
}
};
}

return {
init: init,
refresh: refresh,
Expand Down

0 comments on commit 91b5517

Please sign in to comment.