Skip to content

Instantly share code, notes, and snippets.

@ju1

ju1/youtubeListenerV2.json

Last active August 31, 2017 21:36
Show Gist options
  • Save ju1/dd092d30b15a4623653505d22461710e to your computer and use it in GitHub Desktop.
Save ju1/dd092d30b15a4623653505d22461710e to your computer and use it in GitHub Desktop.
Download ZIP
Youtube Player Listener V2 (by Cardinal Path)
Raw
youtubeListenerV2.json
{
"exportFormatVersion": 2,
"exportTime": "2017-08-31 21:35:48",
"containerVersion": {
"path": "accounts/1164259306/containers/6426838/versions/0",
"accountId": "1164259306",
"containerId": "6426838",
"containerVersionId": "0",
"container": {
"path": "accounts/1164259306/containers/6426838",
"accountId": "1164259306",
"containerId": "6426838",
"name": "Youtube Recipe Cardinal Path",
"publicId": "GTM-GN5RB62",
"usageContext": [
"WEB"
],
"fingerprint": "1504212175107",
"tagManagerUrl": "https://tagmanager.google.com/#/container/accounts/1164259306/containers/6426838/workspaces?apiLink=container"
},
"tag": [
{
"accountId": "1164259306",
"containerId": "6426838",
"tagId": "3",
"name": "GA - Event - Video Interaction",
"type": "ua",
"parameter": [
{
"type": "BOOLEAN",
"key": "nonInteraction",
"value": "false"
},
{
"type": "BOOLEAN",
"key": "overrideGaSettings",
"value": "true"
},
{
"type": "BOOLEAN",
"key": "doubleClick",
"value": "false"
},
{
"type": "BOOLEAN",
"key": "setTrackerName",
"value": "false"
},
{
"type": "BOOLEAN",
"key": "useDebugVersion",
"value": "false"
},
{
"type": "TEMPLATE",
"key": "eventCategory",
"value": "{{dlv - eventCategory}}"
},
{
"type": "TEMPLATE",
"key": "trackType",
"value": "TRACK_EVENT"
},
{
"type": "BOOLEAN",
"key": "enableLinkId",
"value": "false"
},
{
"type": "TEMPLATE",
"key": "eventAction",
"value": "{{dlv - eventAction}}"
},
{
"type": "TEMPLATE",
"key": "eventLabel",
"value": "{{dlv - eventLabel}}"
},
{
"type": "BOOLEAN",
"key": "enableEcommerce",
"value": "false"
},
{
"type": "TEMPLATE",
"key": "trackingId",
"value": "{{YOUR_GA_TRACKING_ID}}"
}
],
"fingerprint": "1504215335766",
"firingTriggerId": [
"8"
],
"tagFiringOption": "ONCE_PER_EVENT"
},
{
"accountId": "1164259306",
"containerId": "6426838",
"tagId": "4",
"name": "cHTML - Youtube Listener",
"type": "html",
"parameter": [
{
"type": "TEMPLATE",
"key": "html",
"value": "<!--\nGoogle Analytics Tag Manager (V2) custom HTML tag for YouTube video tracking\n\nCopyright 2015, Cardinal Path, Inc.\n\nOriginal author: Stephane Hamel <shamel@cardinalpath.com>\nRevised by: Nicky Yuen <nyuen@cardinalpath.com>\n\nVersion 1.0\n-->\n<script type=\"text/javascript\">\n\t// support multiple players on the same page\n\tvar gtmYTPlayers = [];\n\t\n // OPTIONAL: Enable JSAPI if it's not already on the URL\n // note: this will cause the YouTube player to \"flash\" on the page when reloading to enable the JS API\n for (var e = document.getElementsByTagName(\"iframe\"), x = e.length; x--;)\n if (/youtube.com\\/embed/.test(e[x].src))\n if (e[x].src.indexOf('enablejsapi=') === -1)\n e[x].src += (e[x].src.indexOf('?') === -1 ? '?' : '&') + 'enablejsapi=1';\n\t\t\n\t/**\n\t * Attaches listener once the YouTube API is loaded\t\n\t**/\n function onYouTubeIframeAPIReady() {\n for (var e = document.getElementsByTagName(\"iframe\"), x = e.length; x--;) {\n if (/youtube.com\\/embed/.test(e[x].src)) {\n gtmYTPlayers.push(new YT.Player(e[x], {\n events: {\n onStateChange: onPlayerStateChange,\n onError: onPlayerError\n }\n }));\n YT.gtmLastAction = \"p\";\n }\n }\n }\n\n\t/**\n\t * Listen for play/pause. Other states such as rewind and end could also be added\n * Also report % played every second\n\t * @param e - event\n\t**/\n function onPlayerStateChange(e) {\n e[\"data\"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e[\"target\"]);\n var video_data = e.target[\"getVideoData\"](),\n label = video_data.title;\n if (e[\"data\"] == YT.PlayerState.PLAYING && YT.gtmLastAction == \"p\") {\n dataLayer.push({\n event: 'video',\n eventCategory: 'Youtube',\n\t\t\t\teventAction: 'Played video',\n eventLabel: label\n });\n YT.gtmLastAction = \"\";\n }\n if (e[\"data\"] == YT.PlayerState.PAUSED) {\n dataLayer.push({\n event: 'video',\n eventCategory: 'Youtube',\n\t\t\t\teventAction: 'Paused video',\n eventLabel: label\n });\n YT.gtmLastAction = \"p\";\n }\n }\n\n\t/**\n\t * Catch all to report errors through the GTM data layer. once the error is exposed to GTM, it can be tracked in UA as an event!\n\t * Refer to https://developers.google.com/youtube/js_api_reference#Events onError\n\t * @param: e (event)\n\t**/\n \n function onPlayerError(e) {\n dataLayer.push({\n event: 'video',\n\t\t\teventCategory: 'Youtube',\n\t\t\teventAction: 'Video error',\n eventLabel: 'Youtube: ' + e\n })\n }\n\n\t/**\n\t * Report the % played if it matches 25%, 50%, 75%, or 100%\n\t * @param: e (event)\n\t**/\n function onPlayerPercent(e) {\n if (e[\"getPlayerState\"]() == YT.PlayerState.PLAYING) {\n //var t = e[\"getDuration\"]() - e[\"getCurrentTime\"]() <= 1.5 ? 1 : (Math.floor(e[\"getCurrentTime\"]() / e[\"getDuration\"]() * 4) / 4).toFixed(2);\n \n // Set the played duration to every tenth because we'll need to also capture 90% played.\n var t = e[\"getDuration\"]() - e[\"getCurrentTime\"]() <= 1.5 ? 1 : (Math.floor(e[\"getCurrentTime\"]() / e[\"getDuration\"]() * 10) / 10).toFixed(2);\n if (parseFloat(t) < 0.25) {\n t = 0.00;\n }\n else if (parseFloat(t) < 0.5){\n t = 0.25;\n }\n else if (parseFloat(t) < 0.75){\n t = 0.50;\n }\n else if (parseFloat(t) < 0.9){\n t = 0.75;\n }\n \telse if (parseFloat(t) < 1){\n \tt = 0.9;\n }\n \n // duration t needs to be fixed to 2 decimal places\n t = t.toFixed(2);\n \n if (!e[\"lastP\"] || t > e[\"lastP\"]) {\n var video_data = e[\"getVideoData\"](),\n label = video_data.title;\n e[\"lastP\"] = t;\n \tif (t==0.25 || t==0.50 || t==0.75 || t==1){\n dataLayer.push({\n event: \"video\",\n eventCategory: 'Youtube',\n eventAction: t * 100 + \"%\",\n eventLabel: label\n })\n }\n }\n e[\"lastP\"] != 1 && setTimeout(onPlayerPercent, 1000, e);\n }\n }\n\t\n\t/**\n\t * Add unload event listener\n\t**/\n\twindow.addEventListener('beforeunload', function(e){\n\t\tfor (var i = 0; i < gtmYTPlayers.length; i++){\n\t\t\tif (gtmYTPlayers[i].getPlayerState() === 1) { // playing\n\t\t\t\tvar video_data = gtmYTPlayers[i]['getVideoData'](),\n\t\t\t\tlabel = video_data.title;\n\t\t\t\t\n\t\t\t\tdataLayer.push({\n\t\t\t\t\tevent: 'video',\n\t\t\t\t\teventCategory: 'Youtube',\n\t\t\t\t\teventAction: 'Exited video',\n\t\t\t\t\teventLabel: label\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t})\n \n\t// load the Youtube JS api and get going\n var j = document.createElement(\"script\"),\n f = document.getElementsByTagName(\"script\")[0];\n j.src = \"//www.youtube.com/iframe_api\";\n j.async = true;\n f.parentNode.insertBefore(j, f);\n</script>"
},
{
"type": "BOOLEAN",
"key": "supportDocumentWrite",
"value": "false"
}
],
"fingerprint": "1504215231994",
"firingTriggerId": [
"9"
],
"tagFiringOption": "ONCE_PER_EVENT"
}
],
"trigger": [
{
"accountId": "1164259306",
"containerId": "6426838",
"triggerId": "8",
"name": "Custom - Video Interaction",
"type": "CUSTOM_EVENT",
"customEventFilter": [
{
"type": "EQUALS",
"parameter": [
{
"type": "TEMPLATE",
"key": "arg0",
"value": "{{_event}}"
},
{
"type": "TEMPLATE",
"key": "arg1",
"value": "video"
}
]
}
],
"fingerprint": "1503954122533"
},
{
"accountId": "1164259306",
"containerId": "6426838",
"triggerId": "9",
"name": "Pageview - Youtube Player Is Present",
"type": "DOM_READY",
"filter": [
{
"type": "EQUALS",
"parameter": [
{
"type": "TEMPLATE",
"key": "arg0",
"value": "{{Custom Javascript - Is Youtube Present}}"
},
{
"type": "TEMPLATE",
"key": "arg1",
"value": "true"
}
]
}
],
"fingerprint": "1503953028677"
}
],
"variable": [
{
"accountId": "1164259306",
"containerId": "6426838",
"variableId": "1",
"name": "Custom Javascript - Is Youtube Present",
"type": "jsm",
"parameter": [
{
"type": "TEMPLATE",
"key": "javascript",
"value": "// Return \"true\" if there is at least one YouTube video on the page\nfunction () {\n for (var e = document.getElementsByTagName('iframe'), x = e.length; x--;)\n if (/youtube.com\\/embed/.test(e[x].src)){\n return true;\n }\n return false;\n}"
}
],
"fingerprint": "1488209341371"
},
{
"accountId": "1164259306",
"containerId": "6426838",
"variableId": "3",
"name": "dlv - eventAction",
"type": "v",
"parameter": [
{
"type": "INTEGER",
"key": "dataLayerVersion",
"value": "2"
},
{
"type": "BOOLEAN",
"key": "setDefaultValue",
"value": "false"
},
{
"type": "TEMPLATE",
"key": "name",
"value": "eventAction"
}
],
"fingerprint": "1488209387977"
},
{
"accountId": "1164259306",
"containerId": "6426838",
"variableId": "2",
"name": "dlv - eventCategory",
"type": "v",
"parameter": [
{
"type": "INTEGER",
"key": "dataLayerVersion",
"value": "2"
},
{
"type": "BOOLEAN",
"key": "setDefaultValue",
"value": "false"
},
{
"type": "TEMPLATE",
"key": "name",
"value": "eventCategory"
}
],
"fingerprint": "1488209371199"
},
{
"accountId": "1164259306",
"containerId": "6426838",
"variableId": "4",
"name": "dlv - eventLabel",
"type": "v",
"parameter": [
{
"type": "INTEGER",
"key": "dataLayerVersion",
"value": "2"
},
{
"type": "BOOLEAN",
"key": "setDefaultValue",
"value": "false"
},
{
"type": "TEMPLATE",
"key": "name",
"value": "eventLabel"
}
],
"fingerprint": "1488209438743"
}
],
"builtInVariable": [
{
"accountId": "1164259306",
"containerId": "6426838",
"type": "PAGE_URL",
"name": "Page URL"
},
{
"accountId": "1164259306",
"containerId": "6426838",
"type": "PAGE_HOSTNAME",
"name": "Page Hostname"
},
{
"accountId": "1164259306",
"containerId": "6426838",
"type": "PAGE_PATH",
"name": "Page Path"
},
{
"accountId": "1164259306",
"containerId": "6426838",
"type": "REFERRER",
"name": "Referrer"
},
{
"accountId": "1164259306",
"containerId": "6426838",
"type": "EVENT",
"name": "Event"
}
],
"fingerprint": "0",
"tagManagerUrl": "https://tagmanager.google.com/#/versions/accounts/1164259306/containers/6426838/versions/0?apiLink=version"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment