{"id":22571357,"url":"https://github.com/designyourcode/video-tracking","last_synced_at":"2025-07-17T00:06:48.379Z","repository":{"id":92528177,"uuid":"58122514","full_name":"DesignyourCode/video-tracking","owner":"DesignyourCode","description":"HTML5 Video Tracking","archived":false,"fork":false,"pushed_at":"2016-08-23T10:00:32.000Z","size":5289,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-28T14:43:12.870Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DesignyourCode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-05T10:13:25.000Z","updated_at":"2017-10-24T17:03:32.000Z","dependencies_parsed_at":"2023-04-27T18:52:40.243Z","dependency_job_id":null,"html_url":"https://github.com/DesignyourCode/video-tracking","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DesignyourCode/video-tracking","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fvideo-tracking","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fvideo-tracking/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fvideo-tracking/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fvideo-tracking/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DesignyourCode","download_url":"https://codeload.github.com/DesignyourCode/video-tracking/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignyourCode%2Fvideo-tracking/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265553335,"owners_count":23787054,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-08T01:42:18.259Z","updated_at":"2025-07-17T00:06:48.362Z","avatar_url":"https://github.com/DesignyourCode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tracking for Youtube and HTML5 Videos\n\nThis jQuery plugin has been built to allow you to track videos in your site. It supports Youtube videos and HTML5 embeded videos.\n\nYou can push tracking events into both Google's Universal Analytics and KissMetrics.\n\n### Requirements\n - Google Universal Analytics Script\n - jQuery 1.9+\n - This plugin\n\n## Quick Start:\n - Add jQuery to your site\n - Use video-tracking.js for development and video-tracking.min.js for production\n\n```\n\u003cscript type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"assets/lib/vendor/video-tracking.min.js\"\u003e\u003c/script\u003e\n```\n\n#### You must include GA code on your site!\n```\n\u003cscript\u003e\n  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');\n\n  ga('create', 'UA-XXXXXXXX-X', 'auto');\n  ga('send', 'pageview');\n\u003c/script\u003e\n```\n\n## Getting started with Youtube Video Tracking\n\n- Then add the following (remember not to duplicate document.ready, if you already have this just add the plugin initialisation code):\n\n```\n$(document).ready(function(){\n\n    $('[data-track-video]').trackVideo();\n\n});\n```\n\n- The plugin will loop through the page, find all the div's with 'player-' and then build the Youtube video accordingly.\n\n```\n\u003cdiv id=\"player-\u003cyoutube-key\u003e\"\u003e\u003c/div\u003e\n\n\u003c!-- For example: --\u003e\n\u003cdiv id=\"player-ScMzIvxBSi4\"\u003e\u003c/div\u003e\n```\n\n## IMPORTANT\nIf a Youtube video hasn't had it's title entered properly when uploaded, you will need to define one yourself.\n\nTo do this add data-title attribute:\n\n```\n\u003cdiv id=\"player-ScMzIvxBSi4\" data-title=\"Title goes here\"\u003e\u003c/div\u003e\n```\nIt is good practice to test what GA data is being sent.\n\n\n## Options\n- You can control the size, by adding a relevant data tag:\n```\ndata-height=\"390\"\ndata-width=\"640\"\n```\nBy default it will be 853 wide by 480 high.\n\n- You can ignore the sizing and force the video to load responsively (keeping the aspect ratio).\n\nJust add the following CSS in your CSS file:\n```\n.video-ratio {\n  position: relative;\n  padding-bottom: 56.25%;\n  height: 0;\n  overflow: hidden;\n}\n.video-ratio iframe,\n.video-ratio video,\n.video-ratio object,\n.video-ratio embed {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n```\n\nAnd add a parent div with a class of `video-ratio`.\n```\n\u003cdiv class=\"video-ratio\"\u003e\n\t\u003cdiv id=\"player-ScMzIvxBSi4\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n##Parameters\n- You can pass in player parameters as an object within the plugin.\n- Please visit [Youtube Embed Parameters](https://developers.google.com/youtube/player_parameters) for available options.\n\n```\n$('body').trackVideo({\n    playerVars: {\n        'rel': 0,\n        'showinfo': 1\n    }\n});\n```\n\n##KissMetrics\nThis plugin supports KissMetrics tracking as well. However this is not a requirement and is switched off by default.\n\nTo enable this you can simply pass a parameter.\n\n```\n$(document).ready(function(){\n\n    $('body').trackVideo({\n        'kissMetricsTracking': true\n    });\n\n});\n```\n\n## Getting started with HTML5 Video Tracking\n\nYou will need to assign a title to your video\n\n```\n\u003cvideo data-title=\"Title of Video Goes here\"\u003e\n```\n\nYou can also define a category for your video when it is put into GA.\n\n```\n\u003cvideo data-gacategory=\"welcome video\"\u003e\n```\n\n## Demo\nView the [demo page](http://video-tracking.designyourcode.io/)\n\n## @TODO\n\n 1. Improve settings logic\n 2. Improve documentation\n 3. Adding NPM installation support\n 4. Add documentation to demo page","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignyourcode%2Fvideo-tracking","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdesignyourcode%2Fvideo-tracking","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignyourcode%2Fvideo-tracking/lists"}