Skip to content

Instantly share code, notes, and snippets.

@ju1

ju1/vimeoListener.json

Last active November 23, 2021 13:18
Show Gist options
  • Save ju1/7b4b2698639dfeb663da8ab6b1d96fbb to your computer and use it in GitHub Desktop.
Save ju1/7b4b2698639dfeb663da8ab6b1d96fbb to your computer and use it in GitHub Desktop.
Download ZIP
Vimeo Player Recipe for Google Tag Manager
Raw
vimeoListener.json
{
"exportFormatVersion": 2,
"exportTime": "2021-11-23 13:17:42",
"containerVersion": {
"path": "accounts/1164259306/containers/6427280/versions/0",
"accountId": "1164259306",
"containerId": "6427280",
"containerVersionId": "0",
"container": {
"path": "accounts/1164259306/containers/6427280",
"accountId": "1164259306",
"containerId": "6427280",
"name": "Vimeo Recipe",
"publicId": "GTM-WKP8NNF",
"usageContext": [
"WEB"
],
"fingerprint": "1488212378263",
"tagManagerUrl": "https://tagmanager.google.com/#/container/accounts/1164259306/containers/6427280/workspaces?apiLink=container"
},
"tag": [
{
"accountId": "1164259306",
"containerId": "6427280",
"tagId": "1",
"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": "1503956082929",
"firingTriggerId": [
"5"
],
"tagFiringOption": "ONCE_PER_EVENT",
"consentSettings": {
"consentStatus": "NOT_SET"
}
},
{
"accountId": "1164259306",
"containerId": "6427280",
"tagId": "2",
"name": "cHTML - Vimeo Listener",
"type": "html",
"parameter": [
{
"type": "TEMPLATE",
"key": "html",
"value": "<!--\nGoogle Analytics Tag Manager (V2) custom HTML tag for Vimeo video tracking\n\nCopyright 2016, Cardinal Path, Inc.\n\nOriginal author: Bill Tripple <[email protected]>\nRevised by: Bogdan Bistriceanu <[email protected]>\nUpdated by: Julius Fedorovicius <[email protected]> and Richard Outram <[email protected]>\n\nVersion 2.1\n-->\n\n<script>\nvar dataLayer = (typeof(dataLayer) !== \"undefined\" && dataLayer instanceof Array) ? dataLayer : [];\nvar videoLabels=[];\nvar lastP=[];\n\n//we declare variables that will hold information about the video being played\nvar _playerTitle = {}, _playerAuthor = {}, _playerAuthorURL = {}, _playerUploadDate = {}; \n\ntry{\n init();\n}\ncatch(err){\n dataLayer.push({\n 'event': 'gtm.error',\n 'errorMessage': e.message,\n 'tag': 'CP - UA - Vimeo Video Listener'\n })\n}\nfunction init(){\n try{\n var player=document.getElementsByTagName(\"iframe\");\n for (i = 0; i < player.length; ++i) {\n var url=player[i].getAttribute(\"src\");\n\n if(/player\\.vimeo\\.com\\/video/.test(url)){ // vimeo iframe found\n if(!player[i].hasAttribute(\"id\")){ // id attribute missing\n player[i].setAttribute(\"id\",\"vimeo_id_\"+i); // add id attribute\n }\n var urlUpdated=false;\n if(!/api=/.test(url)){ // check to see if api parameter is in src attribute\n url=updateUrl(url,\"api\",1);\n urlUpdated=true;\n }\n\n if(!/player_id=/.test(url)){ // check if player_id is in src attribute\n url=updateUrl(url,\"player_id\",player[i].getAttribute(\"id\"));\n urlUpdated=true;\n }\n if(urlUpdated){ // repopulate src attribute with added parameters\n player[i].setAttribute(\"src\",url)\n }\n videoLabels[player[i].getAttribute(\"id\")]=player[i].getAttribute(\"src\"); // id to label dictionary\n }\n }\n\n // Listen for messages from the player\n if (window.addEventListener){\n window.addEventListener('message', onMessageReceived, false);\n }\n else {\n window.attachEvent('onmessage', onMessageReceived, false);\n }\n }\n catch(err){\n }\n}\n\nfunction updateUrl(url,param,value){\n try{\n return url+((/\\?/.test(url)) ? \"&\" : \"?\")+param+\"=\"+value; \n }\n catch(err){\n }\n}\n\n// Handle messages received from the player\nfunction onMessageReceived(e) {\n try{\n var data = e.data;\n \n if(typeof data === \"string\"){\n data = JSON.parse(data);\n }\n \n switch (data.event) {\n case 'ready':\n onReady(data);\n break;\n case 'play':\n onPlay(data);\n break;\n case 'pause':\n onPause(data);\n break;\n case 'timeupdate':\n onPlayProgress(data);\n break;\n }\n }\n catch(err){\n }\n}\n\n// Helper function for sending a message to the player\nfunction post(action, value) {\n try{\n var data = {\n method: action\n };\n\n if (value) {\n data.value = value;\n }\n\n var message = JSON.stringify(data);\n var player = document.getElementsByTagName(\"iframe\");\n var url;\n var prot;\n\n\n for (i = 0; i < player.length; ++i) {\n url=player[i].getAttribute(\"src\");\n\n if(/player\\.vimeo\\.com\\/video/.test(url)){\n // Check if protocol exists\n prot = player[i].getAttribute('src').split('?')[0].split('//')[0];\n\n // If protocol doesn't exist, then need to append to \"url\"\n if (!prot){\n url=\"https:\" + player[i].getAttribute(\"src\").split('?')[0];\n }\n player[i].contentWindow.postMessage(data, url);\n }\n }\n }\n catch(err){\n }\n}\n\nfunction getLabel(id){\n try{\n return videoLabels[id].split('?')[0].split('/').pop();\n }\n catch(err){\n }\n}\n\n//our function that will use the Vimeo oEmbed API to retrieve additional information about the video\nfunction getVimeoInfo(url, callback) {\n \n var script = document.createElement('script');\n script.type = 'text/javascript';\n script.src = url;\n \n document.getElementsByTagName('body')[0].appendChild(script);\n}\n\n//the callback function which takes the data received from the Vimeo oEmbed API and places it into the corresponding objectes\nfunction vimeoCallback(e){\n //console.log(e);\n _playerTitle[e['video_id']] = e['title'];\n _playerAuthor[e['video_id']] = e['author_name']\n _playerAuthorURL[e['video_id']] = e['author_url']\n _playerUploadDate[e['video_id']] = e['upload_date']\n}\n\nfunction onReady(data) {\n try{\n //execute our function which queries the Vimeo oEmbed API once the embedded videos are \"ready\"\n getVimeoInfo(\"https://www.vimeo.com/api/oembed.json?url=https://vimeo.com/\"+getLabel(data.player_id)+\"&callback=vimeoCallback\", vimeoCallback);\n\n post('addEventListener', 'play');\n post('addEventListener', 'pause');\n post('addEventListener', 'finish');\n post('addEventListener', 'playProgress');\n }\n catch(err){\n }\n}\n\nfunction onPlay(data){\n try{\n dataLayer.push({\n event: \"video\",\n eventCategory: \"vimeo\",\n eventAction: \"vimeo play\",\n eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + \" - \" + getLabel(data.player_id),\n vimeo_playerID: getLabel(data.player_id),\n vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),\n vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),\n vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),\n vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],\n nonInteractive: true\n });\n }\n catch(err){\n }\n}\n\nfunction onPause(data){\n try{\n dataLayer.push({\n event: \"video\",\n eventCategory: \"vimeo\",\n eventAction: \"vimeo video pause\",\n eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + \" - \" + getLabel(data.player_id),\n vimeo_playerID: getLabel(data.player_id),\n vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),\n vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),\n vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),\n vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],\n nonInteractive: true\n });\n }\n catch(err){\n }\n}\n\n// Track progress: 25%, 50%, 75%, 100%\nfunction onPlayProgress(data) {\n try{\n var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2); if (!lastP[data.player_id] || t > lastP[data.player_id]) {\n lastP[data.player_id]=t;\n if (parseFloat(t) != 0){\n dataLayer.push({\n event: \"video\",\n eventCategory: \"vimeo\",\n eventAction: \"vimeo video \" +t*100+ \"% Complete\",\n eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + \" - \" + getLabel(data.player_id),\n vimeo_playerID: getLabel(data.player_id),\n vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),\n vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),\n vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),\n vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],\n nonInteractive: true\n })\n }\n }\n }\n catch(err){\n }\n}\n</script>"
},
{
"type": "BOOLEAN",
"key": "supportDocumentWrite",
"value": "false"
}
],
"fingerprint": "1637673452585",
"firingTriggerId": [
"6"
],
"tagFiringOption": "ONCE_PER_EVENT",
"monitoringMetadata": {
"type": "MAP"
},
"consentSettings": {
"consentStatus": "NOT_SET"
}
}
],
"trigger": [
{
"accountId": "1164259306",
"containerId": "6427280",
"triggerId": "5",
"name": "Custom - Video Interaction",
"type": "CUSTOM_EVENT",
"customEventFilter": [
{
"type": "EQUALS",
"parameter": [
{
"type": "TEMPLATE",
"key": "arg0",
"value": "{{_event}}"
},
{
"type": "TEMPLATE",
"key": "arg1",
"value": "video"
}
]
}
],
"fingerprint": "1503956069502"
},
{
"accountId": "1164259306",
"containerId": "6427280",
"triggerId": "6",
"name": "Pageview - Vimeo Player Is Present",
"type": "WINDOW_LOADED",
"filter": [
{
"type": "EQUALS",
"parameter": [
{
"type": "TEMPLATE",
"key": "arg0",
"value": "{{Custom Javascript - Is Vimeo Present}}"
},
{
"type": "TEMPLATE",
"key": "arg1",
"value": "true"
}
]
}
],
"fingerprint": "1637673297132"
}
],
"variable": [
{
"accountId": "1164259306",
"containerId": "6427280",
"variableId": "1",
"name": "Custom Javascript - Is Vimeo Present",
"type": "jsm",
"parameter": [
{
"type": "TEMPLATE",
"key": "javascript",
"value": "//this function checks for the presence of an embedded Vimeo video\n//if one or more videos are present, return true, otherwise return false\n\nfunction () {\n for (var e = document.getElementsByTagName(\"iframe\"), x=0; x < e.length; x++) {\n if (/^https?:\\/\\/player.vimeo.com/.test(e[x].src)) {\n return true;\n }\n }\n return false;\n}"
}
],
"fingerprint": "1488212329605"
},
{
"accountId": "1164259306",
"containerId": "6427280",
"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": "1488212238899"
},
{
"accountId": "1164259306",
"containerId": "6427280",
"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": "1488212238900"
},
{
"accountId": "1164259306",
"containerId": "6427280",
"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": "1488212238900"
}
],
"builtInVariable": [
{
"accountId": "1164259306",
"containerId": "6427280",
"type": "PAGE_URL",
"name": "Page URL"
},
{
"accountId": "1164259306",
"containerId": "6427280",
"type": "PAGE_HOSTNAME",
"name": "Page Hostname"
},
{
"accountId": "1164259306",
"containerId": "6427280",
"type": "PAGE_PATH",
"name": "Page Path"
},
{
"accountId": "1164259306",
"containerId": "6427280",
"type": "REFERRER",
"name": "Referrer"
},
{
"accountId": "1164259306",
"containerId": "6427280",
"type": "EVENT",
"name": "Event"
}
],
"fingerprint": "1637673462886",
"tagManagerUrl": "https://tagmanager.google.com/#/versions/accounts/1164259306/containers/6427280/versions/0?apiLink=version"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment