Skip to content

Instantly share code, notes, and snippets.

@ju1

ju1/youtubeListenerV3.json

Created February 27, 2017 16:10
Show Gist options
  • Save ju1/834433b93c2142e76916cdfdb92e4a27 to your computer and use it in GitHub Desktop.
Save ju1/834433b93c2142e76916cdfdb92e4a27 to your computer and use it in GitHub Desktop.
Download ZIP
Youtube Player Listener V3 (modified CP solution)
Raw
youtubeListenerV3.json
{
"exportFormatVersion": 2,
"exportTime": "2017-02-27 16:09:20",
"containerVersion": {
"path": "accounts/1164259306/containers/6426949/versions/0",
"accountId": "1164259306",
"containerId": "6426949",
"containerVersionId": "0",
"container": {
"path": "accounts/1164259306/containers/6426949",
"accountId": "1164259306",
"containerId": "6426949",
"name": "Youtube Recipe Fix",
"publicId": "GTM-M7F6HZR",
"usageContext": [
"WEB"
],
"fingerprint": "1488211550489",
"tagManagerUrl": "https://tagmanager.google.com/#/container/accounts/1164259306/containers/6426949/workspaces?apiLink=container"
},
"tag": [
{
"accountId": "1164259306",
"containerId": "6426949",
"tagId": "1",
"name": "GA - Event - Youtube Interaction",
"type": "ua",
"parameter": [
{
"type": "BOOLEAN",
"key": "nonInteraction",
"value": "false"
},
{
"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": "1488211736119",
"firingTriggerId": [
"5"
],
"tagFiringOption": "ONCE_PER_EVENT"
},
{
"accountId": "1164259306",
"containerId": "6426949",
"tagId": "2",
"name": "cHTML - Youtube Listener",
"type": "html",
"parameter": [
{
"type": "TEMPLATE",
"key": "html",
"value": "<script>\n//enable the JavaScript API for an embedded player\nfor (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\nvar gtmYTListeners = [], gtmYTListenersStates = []; // support multiple players on the same page\n// attach our YT listener once the API is loaded\nfunction onYouTubeIframeAPIReady() {\n for (var e = document.getElementsByTagName(\"iframe\"), x = e.length; x--;) {\n if (/youtube.com\\/embed/.test(e[x].src)) {\n gtmYTListeners.push(new YT.Player(e[x], {\n events: {\n onError: onPlayerError,\n onReady: onPlayerReady\n //onStateChange: onPlayerStateChange\n }\n }));\n YT.gtmLastAction = \"p\";\n }\n }\n}\n \nfunction onPlayerReady(e) {\n var url = e.target.getVideoUrl();\n gtmYTListenersStates[url] = e.target.getPlayerState();\n\n setInterval(function() {\n var state = e.target.getPlayerState();\n\n if (gtmYTListenersStates[url] !== state) {\n e.data = state;\n onPlayerStateChange(e);\n }\n gtmYTListenersStates[url] = state;\n }, 100);\n}\n\n// listen for play, pause and end states\n// also report % played every second\nfunction 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 // Get title of the current page\n var pageTitle = document.title;\n if (e[\"data\"] == YT.PlayerState.PLAYING && YT.gtmLastAction == \"p\") {\n label = \"Video Played - \" + video_data.title;\n dataLayer.push({\n 'event': 'youtube',\n 'eventCategory': 'Youtube Videos',\n 'eventAction': pageTitle,\n 'eventLabel': label\n });\n YT.gtmLastAction = \"\";\n }\n if (e[\"data\"] == YT.PlayerState.PAUSED) {\n label = \"Video Paused - \" + video_data.title;\n dataLayer.push({\n 'event': 'youtube',\n 'eventCategory': 'Youtube Videos',\n 'eventAction': pageTitle,\n 'eventLabel': label\n });\n YT.gtmLastAction = \"p\";\n }\n \n}\n\n// catch all to report errors through the GTM data layer\n// once the error is exposed to GTM, it can be tracked in UA as an event!\nfunction onPlayerError(e) {\n dataLayer.push({\n 'event': 'error',\n 'eventCategory': 'Youtube Videos',\n 'eventAction': 'GTM',\n 'eventLabel': \"youtube:\" + e[\"target\"][\"src\"] + \"-\" + e[\"data\"]\n })\n}\n\n// report the % played if it matches 0%, 25%, 50%, 75% or completed\nfunction onPlayerPercent(e) {\n console.log(\"onPlayerPercent\");\n if (e[\"getPlayerState\"]() == YT.PlayerState.PLAYING) {\n var t = e[\"getDuration\"]() - e[\"getCurrentTime\"]() <= 1.5 ? 1 : (Math.floor(e[\"getCurrentTime\"]() / e\n\n[\"getDuration\"]() * 4) / 4).toFixed(2); if (!e[\"lastP\"] || t > e[\"lastP\"]) {\n var video_data = e[\"getVideoData\"](),\n label = video_data.title;\n // Get title of the current page\n var pageTitle = document.title;\n e[\"lastP\"] = t;\n label = t * 100 + \"% Video played - \" + video_data.title;\n dataLayer.push({\n 'event': 'youtube',\n 'eventCategory': 'Youtube Videos',\n 'eventAction': pageTitle,\n 'eventLabel': label\n })\n }\n e[\"lastP\"] != 1 && setTimeout(onPlayerPercent, 1000, e);\n }\n}\n \n// load the Youtube JS api and get going\nvar j = document.createElement(\"script\"),\n f = document.getElementsByTagName(\"script\")[0];\nj.src = \"//www.youtube.com/iframe_api\";\nj.async = true;\nf.parentNode.insertBefore(j, f);\n</script>"
},
{
"type": "BOOLEAN",
"key": "supportDocumentWrite",
"value": "false"
}
],
"fingerprint": "1488211528208",
"firingTriggerId": [
"6"
],
"tagFiringOption": "ONCE_PER_EVENT"
}
],
"trigger": [
{
"accountId": "1164259306",
"containerId": "6426949",
"triggerId": "5",
"name": "Custom - Youtube Interaction",
"type": "CUSTOM_EVENT",
"customEventFilter": [
{
"type": "EQUALS",
"parameter": [
{
"type": "TEMPLATE",
"key": "arg0",
"value": "{{_event}}"
},
{
"type": "TEMPLATE",
"key": "arg1",
"value": "youtube"
}
]
}
],
"fingerprint": "1488211487755"
},
{
"accountId": "1164259306",
"containerId": "6426949",
"triggerId": "6",
"name": "DOM - Youtube 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": "1488211487756"
}
],
"variable": [
{
"accountId": "1164259306",
"containerId": "6426949",
"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": "1488211487756"
},
{
"accountId": "1164259306",
"containerId": "6426949",
"variableId": "2",
"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": "1488211487756"
},
{
"accountId": "1164259306",
"containerId": "6426949",
"variableId": "3",
"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": "1488211487757"
},
{
"accountId": "1164259306",
"containerId": "6426949",
"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": "1488211487757"
}
],
"builtInVariable": [
{
"accountId": "1164259306",
"containerId": "6426949",
"type": "PAGE_URL",
"name": "Page URL"
},
{
"accountId": "1164259306",
"containerId": "6426949",
"type": "PAGE_HOSTNAME",
"name": "Page Hostname"
},
{
"accountId": "1164259306",
"containerId": "6426949",
"type": "PAGE_PATH",
"name": "Page Path"
},
{
"accountId": "1164259306",
"containerId": "6426949",
"type": "REFERRER",
"name": "Referrer"
},
{
"accountId": "1164259306",
"containerId": "6426949",
"type": "EVENT",
"name": "Event"
}
],
"fingerprint": "0",
"tagManagerUrl": "https://tagmanager.google.com/#/versions/accounts/1164259306/containers/6426949/versions/0?apiLink=version"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment