{"_id":"@analytics-debugger/html-media-elements","_rev":"2-d3f4be5ba734d8a71419a88caf705b1e","name":"@analytics-debugger/html-media-elements","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@analytics-debugger/html-media-elements","version":"0.0.1","description":"HTML Media Elements - Track Audio/Video Media Elements Easily","main":"dist/htmlMediaElementsTracker.min.js","module":"dist/dist/htmlMediaElementsTracker.esm.min.js","browser":"dist/htmlMediaElementsTracker.min.js","devDependencies":{"@babel/core":"^7.9.6","@babel/plugin-transform-object-assign":"^7.8.3","@babel/preset-env":"^7.9.6","@rollup/plugin-node-resolve":"^7.1.3","jest":"^26.6.3","rollup":"^1.32.1","rollup-plugin-babel":"^4.4.0","rollup-plugin-license":"^2.5.0","rollup-plugin-terser":"^7.0.0"},"scripts":{"build":"rollup -c","dev":"rollup -c --watch","test":"jest","devtest":"jest --watch","prepublish:patch":"npm version patch --force && npm run build","prepublish:minor":"npm version minor --force && npm run build","prepublish:major":"npm version major --force && npm run build","publish:public":"npm publish --access public","pack":"npm pack"},"repository":{"type":"git","url":"git+https://github.com/analytics-debugger/html-media-elements-tracking-library.git"},"keywords":["html elements","videos","audio","gtm","google tag manager","tealium","tms","video tracking","html","analytics"],"author":{"name":"David Vallejo","email":"thyngster@gmail.com","url":"https://www.thyngster.com"},"license":"MIT","bugs":{"url":"https://github.com/analytics-debugger/html-media-elements-tracking-library/issues"},"homepage":"https://www.thyngster.com","funding":{"type":"individual","url":"https://ko-fi.com/thyngster"},"dependencies":{"http-server":"^0.12.3"},"_id":"@analytics-debugger/html-media-elements@0.0.1","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-2czwK02+hwOMPF1w0DbdRoWjmNWZyZl/6xmv/d9KpHf95+xMsgU335ciEAo8IT+d0b2zwQjLb8lBsRWppHzShw==","shasum":"e473f353300fc2b7e704f6845925a91e67235cc7","tarball":"https://registry.npmjs.org/@analytics-debugger/html-media-elements/-/html-media-elements-0.0.1.tgz","fileCount":11,"unpackedSize":109602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgycwpCRA9TVsSAnZWagAAcUQP/iBhLnblrAziE8v1/FPJ\ndMoHow5i3RrZdnZpdAz/z4XWXzUkpn17YU82XJCVdvk1R9F42+B7O2G8kKwg\nOWjB32nGdYMxNbfi2F9N5kleuELnC4KjxhjvucZAHYN5Jei6Zro64h/3J52e\nwnHH45a+00YGCtma66BuIou/wYHLgIPkNnOfc9ISQz5H2F0bYbHP5Mx/4bum\niWrO7lJPNwXUtBIk6lG1kk3Gd6OXJ3o30u8HYDYF0vC83ga2g5nGhORLzc3E\nqOjlEr1G5D2bT5bJGVMImf4vKqHcpwVWut+CuZW8oMXVVXab9RF6grhjvkvJ\nv8Rg5ji5GQXCqb1yhkXcyFFddvWOjB9wL+DhrbZGB7MRVO4/b+wRtakeU1bK\nK2Jv15v2n4BCZcYHpJQI90ybJdv5n1AOIJx0UPJchCD6zZ1QjoREcyiww+m8\nuW9mftvGZquFVUFJA6ozQoBOKuUWkGqgoyN40n1H5eCQoWJ+BqoyeaeDgeBy\nlUHLb3FF0XaoSMFF8wyBYY7LG5Tf9kZDHybd/cwdrsHuBPkoCd+SY1fYRIKj\n4kzaWbbHKYncuCSx3Y35Hv4vfj4Jiw0mOv5tCvKLPNsbtaSPgv0GPqyzRa1f\noPUNZ5jjC+knN9ayOcO4uGB2WOcrgSkcaJlCsRUf4zoi9d/EQalU6shYvC+2\nOrq8\r\n=rItC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKDG9dwUlwcgXl0qAzRPMz3ZzdXYlxpnkA+TpvI+VHEAiB8fLvjW1HNrgKa0P2I89ov55C6hd7A1IlM2HGl3TC73g=="}]},"_npmUser":{"name":"thyngster","email":"thyngster@gmail.com"},"directories":{},"maintainers":[{"name":"thyngster","email":"thyngster@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/html-media-elements_0.0.1_1623837737081_0.7375474899483303"},"_hasShrinkwrap":false},"0.0.2":{"name":"@analytics-debugger/html-media-elements","version":"0.0.2","description":"HTML Media Elements - Track Audio/Video Media Elements Easily","main":"dist/htmlMediaElementsTracker.min.js","module":"dist/dist/htmlMediaElementsTracker.esm.min.js","browser":"dist/htmlMediaElementsTracker.min.js","devDependencies":{"@babel/core":"^7.9.6","@babel/plugin-transform-object-assign":"^7.8.3","@babel/preset-env":"^7.9.6","@rollup/plugin-node-resolve":"^7.1.3","jest":"^26.6.3","rollup":"^1.32.1","rollup-plugin-babel":"^4.4.0","rollup-plugin-license":"^2.5.0","rollup-plugin-terser":"^7.0.0"},"scripts":{"build":"rollup -c","dev":"rollup -c --watch","test":"jest","devtest":"jest --watch","prepublish:patch":"npm version patch --force && npm run build","prepublish:minor":"npm version minor --force && npm run build","prepublish:major":"npm version major --force && npm run build","publish:public":"npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/analytics-debugger/html-media-elements-tracking-library.git"},"keywords":["html elements","videos","audio","gtm","google tag manager","tealium","tms","video tracking","html","analytics"],"author":{"name":"David Vallejo","email":"thyngster@gmail.com","url":"https://www.thyngster.com"},"license":"MIT","bugs":{"url":"https://github.com/analytics-debugger/html-media-elements-tracking-library/issues"},"homepage":"https://www.thyngster.com","funding":{"type":"individual","url":"https://ko-fi.com/thyngster"},"gitHead":"8bbf6323a3b12d6dfee26a5ad7a6c7825857c3d6","_id":"@analytics-debugger/html-media-elements@0.0.2","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-CR3SN4zf92scwjzxtFdNIHTpB2u0a5k3cWa8JoO566f2E5gpgC3DtaBbI0GKqKWV9EQc7kuG0cXaQ7xaXvbU1w==","shasum":"7e6b467dec19bc93cf5b4551ed12c0f74a20cab5","tarball":"https://registry.npmjs.org/@analytics-debugger/html-media-elements/-/html-media-elements-0.0.2.tgz","fileCount":11,"unpackedSize":110250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyi1fCRA9TVsSAnZWagAAtFgP/RBGGd2a2goJ7RwHdflO\nc+ajjE37Cp2Qo2s9rS8wwIEQSQkJJJhzPK3UH97dCLcR8CtpBdDnDsHw4CPk\nFZnFbrQ/qhuH/EfvFNmJIX8kuuXN4a2zw15pTWX7gUiq9Xq327umUta7/i2+\n8ETHxwjwEdYJw/aE5rRzVYYWlnIbHCqWEXbzq/jqBXaiuIEoebetpM4DsiSi\nAq2ZpRqz6+XVtC4K8Gj1obb73s6naG5QSmC+rPAyRXlnBbjVc6mY0K8uxeSM\nxk8FvBwN1H6+ek2Ycwv1o7SdbwTPbTZmvJYgy1akwe5DIjoCizZn/TcTN9rQ\nJurFxp5f8TSJhS6KYXgi/5OWe6NNHp8PKwc7JTATDJeu2jfjBhnVK4dpllmD\nca5pjb9Q4wuycAnI9ZHQ0GVkj9KAWUBkpidwylLa9JSjIhSc+CbG3RZh2eCl\nICqxpMh+K0uYan4yW9DqgH3kaCuCcpjZwqxxQ2pYAq89kSRvackv/uinYvKM\n/aiwln0Jf8cZ/cnSuZWOnEn0yWpt8tO5mPjlF+zw6FJIpbSXFr3cGUVvaZ4F\nM5LRnu7NyDFjN3n+RjnedUDKAqCAzwCcRrfR4PgeFsZPutCALO+bpHa1Lacl\nopU89pHjsHX+jHRDMTmbkBBqwA4RMpTEFoGthVcmu1SlSxOxKRRMfSbw8VLk\n2n+5\r\n=IWkQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlbSK4DLesik5RlqCjxuZ+G5ldhWqarNqX384/6l9PPAiAOQFT2Dr5wrKDc4/7nco9BnZi67rquTbOEPyB9Sq2Lyw=="}]},"_npmUser":{"name":"thyngster","email":"thyngster@gmail.com"},"directories":{},"maintainers":[{"name":"thyngster","email":"thyngster@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/html-media-elements_0.0.2_1623862623068_0.4667332536902651"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-16T10:02:16.717Z","0.0.1":"2021-06-16T10:02:17.200Z","modified":"2022-04-04T13:54:54.477Z","0.0.2":"2021-06-16T16:57:03.247Z"},"maintainers":[{"name":"thyngster","email":"thyngster@gmail.com"}],"description":"HTML Media Elements - Track Audio/Video Media Elements Easily","homepage":"https://www.thyngster.com","keywords":["html elements","videos","audio","gtm","google tag manager","tealium","tms","video tracking","html","analytics"],"repository":{"type":"git","url":"git+https://github.com/analytics-debugger/html-media-elements-tracking-library.git"},"author":{"name":"David Vallejo","email":"thyngster@gmail.com","url":"https://www.thyngster.com"},"bugs":{"url":"https://github.com/analytics-debugger/html-media-elements-tracking-library/issues"},"license":"MIT","readme":"\r\n# HTML Media Elements Tracking Library\r\n\r\n\r\n[![](https://data.jsdelivr.com/v1/package/npm/@analytics-debugger/html-media-elements/badge)](https://www.jsdelivr.com/package/npm/@analytics-debugger/html-media-elements)\r\n\r\n\r\nHi! This a **JavaScript** library to help tracking HTML Media Elements ( video/audio elements ) . I started this new version back in 2019 but it was never publicly announced, now I've rewrote it, and build it as a NPM module and Standalone Library.\r\n\r\nThe library is provided in the `AMD`, `UMD`, `IIFE` and `ESM` formats, all of them available in the `dist` folder\r\n\r\nThe current data model is based on the one used by Google Tag Manager for YouTube videos, meaning that you'll be able to use the current in-built events. \r\n\r\n# Features\r\n\r\n - GTM DataLayer Support\r\n - Tealium Support\r\n - Automatic new videos/audio detection\r\n - Data elements support to pass back data for the current video\r\n - Progress tracking\r\n - Start, Pause, Mute, Unmute, Seek, Complete and Error events\r\n\r\n# Build\r\n  \r\n\r\n> $ npm install\r\n> $ npm run build\r\n  \r\n\r\n# How to use\r\n\r\n\r\nThe library will expose a public global variable at **\"window._htmlMediaElementsTracker\"** and an \"init\" method that will accept all the parameters / settings.\r\n\r\n  \r\n\r\n     <script src=\"https://cdn.jsdelivr.net/npm/@thyngster/html-media-elements@latest/dist/htmlMediaElementsTracker.min.js\">\r\n\r\n    <script>\r\n        window._htmlMediaElementsTracker.init({\r\n            tms: 'debug',\r\n            datalayerVariableNames: ['auto'],\r\n            debug: true,\r\n            observe: true,\r\n            data_elements: true,        \r\n            start: true,\r\n            play: true,\r\n            pause: true,\r\n            mute: true,\r\n            unmute: true,\r\n            complete: true,\r\n            seek: true,\r\n            progress: true,\r\n            error: true,\r\n            progress_tracking_method: 'percentages',\r\n            progress_percentages: [1,2,3,4,5,6,7,8,9,10],\r\n            progress_thresholds: [],        \r\n        });   \r\n    </script>\r\n\r\n\r\n# Configuration Settings\r\n\r\n  \r\n\r\n| key name | value type | description |\r\n|--|--|--|\r\n|**tms**|string|Tag Management System we are using|\r\n|**datalayerVariableNames**|array|If the TMS is Google Tag Manager, we can push the data to an specific dataLayer , by default the library will search for the current dataLayer variable name|\r\n|**debug**|boolean|Enable debug output to console|\r\n|**observe**|boolean|Automatically track newly added video/audio elements|\r\n|**data_elements**|boolean|data-html-media-element-title attribute will be used for elementTitle if provided|\r\n|**start**|boolean|Track Audio/Video Start Event|\r\n|**play**|boolean|Track Audio/Video Play Event|\r\n|**pause**|boolean|Track Audio/Video Pause Event|\r\n|**mute**|boolean|Track Audio/Video Mute Event|\r\n|**unmute**|boolean|Track Audio/Video Unmute Event|\r\n|**complete**|boolean|Track Audio/Video End Event|\r\n|**seek**|boolean|Track Audio/Video Seek Event|\r\n|**progress**|boolean|Track Audio/Video Progress Events|\r\n|**progress_tracking_method**|boolean|'percentages' or 'thresholds' // thresholds not available yet| \r\n|**progress_percentages**|array|Array of % where we should fire an event|\r\n|**progress_thresholds**|array|TBD|\r\n\r\n  \r\n\r\n# Supported Events\r\n\r\n-  [x] start\r\n-  [x] pause\r\n-  [x] mute\r\n-  [x] unmute\r\n-  [x] progress ( % of video played )\r\n-  [x] seek\r\n-  [x] complete ( equals to 100% progress )\r\n-  [x] errors\r\n\r\n  \r\n\r\n# Data Model\r\n\r\n  \r\n|Key|Value Example|Description|\r\n|--|--|--|\r\n|**event**|gtm.audio/gtm.video|Current Media Element Type|\r\n|**Provider**|html5|Fixed value, describes the current media element provider|\r\n|**Status**|start,pause,mute,unmute,progress, seek, completed, error|current media element event name|\r\n|**Url**|http://www.dom.com|Current Video Holding URL ( iframe url reported if it's the case)|\r\n|**Title**|Video Demo|Current video element data-media-element-title value, defaults to current video file name|\r\n|**Duration**|230|Media element duration in seconds|\r\n|**CurrentTime**|230|Media element current time in seconds|\r\n|**ElapsedTime**|230|Elapsed time since last pause/play event|\r\n|**Percent**|15|Media element current played %|\r\n|**Visible**|true\\|false|Reports if the video is visible within the current browser viewport|\r\n|**isMuted**|true\\|false|Is the current media element muted?|\r\n|**PlaybackRate**|1|Media Element PlaybackRate, default: 1|\r\n|**Loop**|true\\|false|Is the video set to loop?|\r\n|**Volume**|0.8|Current Video Volume|\r\n|**NetworkState**||Network State|\r\n|**Data**|Object|List of custom video data coming from data-attributes tagging\r\n|**elementClasses**|\"\"|Element Classes List|\r\n|**elementId**|\"\"|Element Id|\r\n|**elementTarget**|\"\"|Element Target|\r\n|**elementUrl**|\"\"|Element URL|\r\n\r\n  \r\n\r\n# Using a custom Video Title\r\n\r\nWhen using HTML Media Element, we don't have a way to pass any video details, this library will allow you to customize the current video Title being reported. \r\n\r\n    <video src=\"\" data-html-media-element-title=\"Demo Video version 1\">\r\n\r\nThis will make the VideoTitle to be reported as \"Demo Video version 1\", is there's not data-attribute the library will use the current video file name\r\n\r\n# Passing back video details\r\nYou can pass all the custom data you need about the video to have it passed back to the tracking events.\r\nTo achieve this we can all the data we want to the videos using data-attributes. \r\n\r\nThis can be done using data-attributes with the following format:\r\n\r\n    data-html-media-element-param-{{PARAM NAME}}=\"{{PARA VALUE}}\"\r\n\r\nAll the data added to the `<video>` elements will be passed back to events so you can used them.\r\n\r\nFor example:\r\n\r\n    <video width=\"400\" \r\n    controls \r\n    data-html-media-element-param-band=\"Neil Zaza\"\r\n    data-html-media-element-param-song-name=\"I'm Alright\"\r\n    data-html-media-element-param-category=\"Music\"\r\n    data-html-media-element-title=\"video test\">\r\n        <source src=\"mov_bbb.mp4\" type=\"video/mp4\">\r\n        <source src=\"mov_bbb.ogg\" type=\"video/ogg\">\r\n        Your browser does not support HTML video.\r\n    </video>\r\n\r\nThis will turn on have a videoData (or audioData) object passing the data this way:\r\n\r\n     {\r\n\t     element:  video\r\n\t     elementClasses:  \"\"\r\n\t     elementId:  \"vbst4f9ed29\"\r\n\t     elementTarget:  video\r\n\t     elementUrl:  \"https://local.dev/demo/mp3.html\"\r\n\t     event:  \"video\"\r\n\t     videoCurrentTime:  2\r\n\t     videoData:\r\n\t    \t band:  \"Neil Zaza\"\r\n\t    \t category:  \"Music\"\r\n\t    \t songname:  \"I'm Alright\"\r\n\t     videoDuration:  361\r\n\t     videoElapsedTime:  2\r\n\t     videoIsMuted:  false\r\n\t     videoLoop:  false\r\n\t     videoNetworkState:  1\r\n\t     videoPercent:  0\r\n\t     videoPlaybackRate:  1\r\n\t     videoProvider:  \"html5\"\r\n\t     videoStatus:  \"pause\"\r\n\t     videoTitle:  \"video test\"\r\n\t     videoUrl:  \"mov_bbb.mp4\"\r\n\t     videoVisible:  true\r\n\t     videoVolume:  1\r\n     }\r\n\r\n# Dynamically added Media Elements / Modals\r\n\r\nThe library is able to attach the needed tracking listeners when a video is added dynamically to the site, like when a video is added into a modal using the Mutation Observer API ( where available ) \r\n\r\nSet `config.objserve` to true to enable this functionality\r\n\r\nThis will allow the tracking of dynamically added videos and videos shown on modals.\r\n\r\n# Tag Manager Systems Support\r\nDespite this library was initially made for GTM it can output the data for some other TMS.  It currently supports Google Tag Manager ( `dataLayer.push()` ) and Tealium ( `utag.link()` )\r\n","readmeFilename":"README.md"}