{"id":13493963,"url":"https://github.com/googleanalytics/autotrack","last_synced_at":"2025-03-25T02:31:27.821Z","repository":{"id":41142896,"uuid":"45273502","full_name":"googleanalytics/autotrack","owner":"googleanalytics","description":"Automatic and enhanced Google Analytics tracking for common user interactions on the web.","archived":true,"fork":false,"pushed_at":"2024-08-20T16:56:44.000Z","size":1379,"stargazers_count":4924,"open_issues_count":51,"forks_count":564,"subscribers_count":190,"default_branch":"master","last_synced_at":"2024-10-29T11:16:54.608Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/googleanalytics.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-10-30T19:54:39.000Z","updated_at":"2024-10-28T14:04:44.000Z","dependencies_parsed_at":"2022-07-13T19:30:32.624Z","dependency_job_id":"2bd9c4cd-af10-4224-97e8-ed6a388e3e3d","html_url":"https://github.com/googleanalytics/autotrack","commit_stats":{"total_commits":448,"total_committers":16,"mean_commits":28.0,"dds":"0.049107142857142905","last_synced_commit":"646e079dbdad6dfb698d1fb4b5047d7edfcb07ef"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleanalytics%2Fautotrack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleanalytics%2Fautotrack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleanalytics%2Fautotrack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleanalytics%2Fautotrack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googleanalytics","download_url":"https://codeload.github.com/googleanalytics/autotrack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245385469,"owners_count":20606654,"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-07-31T19:01:20.394Z","updated_at":"2025-03-25T02:31:27.479Z","avatar_url":"https://github.com/googleanalytics.png","language":"JavaScript","readme":"# This library is no longer actively maintained\n\n# Autotrack [![Build Status](https://travis-ci.org/googleanalytics/autotrack.svg?branch=master)](https://travis-ci.org/googleanalytics/autotrack)\n\n- [Overview](#overview)\n- [Plugins](#plugins)\n- [Installation and usage](#installation-and-usage)\n  - [Loading autotrack via npm](#loading-autotrack-via-npm)\n  - [Passing configuration options](#passing-configuration-options)\n- [Advanced configuration](#advanced-configuration)\n  - [Custom builds](#custom-builds)\n  - [Using autotrack with multiple trackers](#using-autotrack-with-multiple-trackers)\n- [Browser Support](#browser-support)\n- [Translations](#translations)\n\n## Overview\n\nThe default [JavaScript tracking snippet](https://developers.google.com/analytics/devguides/collection/analyticsjs/) for Google Analytics runs when a web page is first loaded and sends a pageview hit to Google Analytics. If you want to know about more than just pageviews (e.g. where the user clicked, how far they scroll, did they see certain elements, etc.), you have to write code to capture that information yourself.\n\nSince most website owners care about a lot of the same types of user interactions, web developers end up writing the same code over and over again for every new site they build.\n\nAutotrack was created to solve this problem. It provides default tracking for the interactions most people care about, and it provides several convenience features (e.g. declarative event tracking) to make it easier than ever to understand how people are interacting with your site.\n\n## Plugins\n\nThe `autotrack.js` file in this repository is small (8K gzipped) and comes with all plugins included. You can use it as is, or you can create a [custom build](#custom-builds) that only includes the plugins you want to make it even smaller.\n\nThe following table briefly explains what each plugin does; you can click on the plugin name to see the full documentation and usage instructions:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth align=\"left\"\u003ePlugin\u003c/th\u003e\n    \u003cth align=\"left\"\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"/docs/plugins/clean-url-tracker.md\"\u003e\u003ccode\u003ecleanUrlTracker\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003eEnsures consistency in the URL paths that get reported to Google Analytics; avoiding the problem where separate rows in your pages reports actually point to the same page.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"/docs/plugins/event-tracker.md\"\u003e\u003ccode\u003eeventTracker\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003eEnables declarative event tracking, via HTML attributes in the markup.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"/docs/plugins/impression-tracker.md\"\u003e\u003ccode\u003eimpressionTracker\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003eAllows you to track when elements are visible within the viewport.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"/docs/plugins/max-scroll-tracker.md\"\u003e\u003ccode\u003emaxScrollTracker\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003eAutomatically tracks how far down the page a user scrolls.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"/docs/plugins/media-query-tracker.md\"\u003e\u003ccode\u003emediaQueryTracker\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003eEnables tracking media query matching and media query changes.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"/docs/plugins/outbound-form-tracker.md\"\u003e\u003ccode\u003eoutboundFormTracker\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003eAutomatically tracks form submits to external domains.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"/docs/plugins/outbound-link-tracker.md\"\u003e\u003ccode\u003eoutboundLinkTracker\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003eAutomatically tracks link clicks to external domains.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"/docs/plugins/page-visibility-tracker.md\"\u003e\u003ccode\u003epageVisibilityTracker\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003eAutomatically tracks how long pages are in the visible state (as opposed to in a background tab)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"/docs/plugins/social-widget-tracker.md\"\u003e\u003ccode\u003esocialWidgetTracker\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003eAutomatically tracks user interactions with the official Facebook and Twitter widgets.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"/docs/plugins/url-change-tracker.md\"\u003e\u003ccode\u003eurlChangeTracker\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003eAutomatically tracks URL changes for single page applications.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n**Disclaimer:** autotrack is maintained by members of the Google Analytics developer platform team and is primarily intended for a developer audience. It is not an official Google Analytics product and does not qualify for Google Analytics 360 support. Developers who choose to use this library are responsible for ensuring that their implementation meets the requirements of the [Google Analytics Terms of Service](https://marketingplatform.google.com/about/analytics/terms/us/) and the legal obligations of their respective country.\n\n## Installation and usage\n\nTo add autotrack to your site, you have to do two things:\n\n1. Load the `autotrack.js` script file included in this repo (or a [custom build](#custom-builds)) on your page.\n2. Update your [tracking snippet](https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference) to [require](https://developers.google.com/analytics/devguides/collection/analyticsjs/using-plugins) the various autotrack plugins you want to use on the [tracker](https://developers.google.com/analytics/devguides/collection/analyticsjs/creating-trackers).\n\nIf your site is currently using the [default JavaScript tracking snippet](https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference), you can modify it to something like this:\n\n```html\n\u003cscript\u003e\nwindow.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;\nga('create', 'UA-XXXXX-Y', 'auto');\n\n// Replace the following lines with the plugins you want to use.\nga('require', 'eventTracker');\nga('require', 'outboundLinkTracker');\nga('require', 'urlChangeTracker');\n// ...\n\nga('send', 'pageview');\n\u003c/script\u003e\n\u003cscript async src=\"https://www.google-analytics.com/analytics.js\"\u003e\u003c/script\u003e\n\u003cscript async src=\"path/to/autotrack.js\"\u003e\u003c/script\u003e\n```\n\nOf course, you'll have to make the following modifications to the above code to customize autotrack to your needs:\n\n- Replace `UA-XXXXX-Y` with your [tracking ID](https://support.google.com/analytics/answer/1032385)\n- Replace the sample list of plugin `require` statements with the plugins you want to use.\n- Replace `path/to/autotrack.js` with the actual location of the `autotrack.js` file hosted on your server.\n\n**Note:** the [analytics.js plugin system](https://developers.google.com/analytics/devguides/collection/analyticsjs/using-plugins) is designed to support asynchronously loaded scripts, so it doesn't matter if `autotrack.js` is loaded before or after `analytics.js`. It also doesn't matter if the `autotrack.js` library is loaded individually or bundled with the rest of your JavaScript code.\n\n### Loading autotrack via npm\n\nIf you use npm and a module loader that understands [ES2015 imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) (e.g. [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), or [SystemJS](https://github.com/systemjs/systemjs)), you can include autotrack in your build by importing it as you would any other npm module:\n\n```sh\nnpm install autotrack\n```\n\n```js\n// In your JavaScript code\nimport 'autotrack';\n```\n**Note:** autotrack's source is published as ES2015, and you will need to make sure you're not excluding it from compilation. See [#137](https://github.com/googleanalytics/autotrack/issues/137) for more details.\n\nThe above `import` statement will include all autotrack plugins in your generated source file. If you only want to include a specific set of plugins, you can import them individually:\n\n```js\n// In your JavaScript code\nimport 'autotrack/lib/plugins/event-tracker';\nimport 'autotrack/lib/plugins/outbound-link-tracker';\nimport 'autotrack/lib/plugins/url-change-tracker';\n```\n\nThe above examples show how to include the autotrack plugin source in your site's main JavaScript bundle, which accomplishes the first step of the [two-step installation process](#installation-and-usage). However, you still have to update your tracking snippet and require the plugins you want to use on the tracker.\n\n```js\n// Import just the plugins you want to use.\nimport 'autotrack/lib/plugins/event-tracker';\nimport 'autotrack/lib/plugins/outbound-link-tracker';\nimport 'autotrack/lib/plugins/url-change-tracker';\n\nga('create', 'UA-XXXXX-Y', 'auto');\n\n// Only require the plugins you've imported above.\nga('require', 'eventTracker');\nga('require', 'outboundLinkTracker');\nga('require', 'urlChangeTracker');\n\nga('send', 'pageview');\n```\n\n#### Code splitting\n\nNote that it's generally not a good idea to include any analytics as part of your site's main JavaScript bundle since analytics are not usually critical application functionality.\n\nIf you're using a bundler that supports code splitting (via something like `System.import()`), it's best to load autotrack plugins lazily and delay their initialization until after your site's critical functionality has loaded:\n\n```js\nwindow.addEventListener('load', () =\u003e {\n  const autotrackPlugins = [\n    'autotrack/lib/plugins/event-tracker',\n    'autotrack/lib/plugins/outbound-link-tracker',\n    'autotrack/lib/plugins/url-change-tracker',\n    // List additional plugins as needed.\n  ];\n\n  Promise.all(autotrackPlugins.map((x) =\u003e System.import(x))).then(() =\u003e {\n    ga('create', 'UA-XXXXX-Y', 'auto');\n\n    ga('require', 'eventTracker', {...});\n    ga('require', 'outboundLinkTracker', {...});\n    ga('require', 'urlChangeTracker', {...});\n    // Require additional plugins imported above.\n\n    ga('send', 'pageview');\n  });\n})\n```\n\nIf you're not sure how do use code splitting with your build setup, see the [custom builds](#custom-builds) section to learn how to manually generate a custom version of autotrack with just the plugins you need.\n\n### Passing configuration options\n\nAll autotrack plugins accept a configuration object as the third parameter to the `require` command.\n\nSome of the plugins (e.g. `outboundLinkTracker`, `socialWidgetTracker`, `urlChangeTracker`) have a default behavior that works for most people without specifying any configuration options. Other plugins (e.g. `cleanUrlTracker`, `impressionTracker`, `mediaQueryTracker`) require certain configuration options to be set in order to work.\n\nSee the individual plugin documentation to reference what options each plugin accepts (and what the default value is, if any).\n\n## Advanced configuration\n\n### Custom builds\n\nAutotrack comes with its own build system, so you can create autotrack bundles containing just the plugins you need. Once you've [installed autotrack via npm](#loading-autotrack-via-npm), you can create custom builds by running the `autotrack` command.\n\nFor example, the following command generates an `autotrack.js` bundle and source map for just the `eventTracker`, `outboundLinkTracker`, and `urlChangeTracker` plugins:\n\n```sh\nautotrack -o path/to/autotrack.custom.js -p eventTracker,outboundLinkTracker,urlChangeTracker\n```\n\nOnce this file is generated, you can include it in your HTML templates where you load `analytics.js`. Note the use of the `async` attribute on both script tags. This prevents `analytics.js` and `autotrack.custom.js` from interfering with the loading of the rest of your site.\n\n```html\n\u003cscript async src=\"https://www.google-analytics.com/analytics.js\"\u003e\u003c/script\u003e\n\u003cscript async src=\"path/to/autotrack.custom.js\"\u003e\u003c/script\u003e\n```\n\n### Using autotrack with multiple trackers\n\nAll autotrack plugins support [multiple trackers](https://developers.google.com/analytics/devguides/collection/analyticsjs/creating-trackers#working_with_multiple_trackers) and work by specifying the tracker name in the `require` command. The following example creates two trackers and requires various autotrack plugins on each.\n\n```js\n// Creates two trackers, one named `tracker1` and one named `tracker2`.\nga('create', 'UA-XXXXX-Y', 'auto', 'tracker1');\nga('create', 'UA-XXXXX-Z', 'auto', 'tracker2');\n\n// Requires plugins on tracker1.\nga('tracker1.require', 'eventTracker');\nga('tracker1.require', 'socialWidgetTracker');\n\n// Requires plugins on tracker2.\nga('tracker2.require', 'eventTracker');\nga('tracker2.require', 'outboundLinkTracker');\nga('tracker2.require', 'pageVisibilityTracker');\n\n// Sends the initial pageview for each tracker.\nga('tracker1.send', 'pageview');\nga('tracker2.send', 'pageview');\n```\n\n## Browser Support\n\nAutotrack will safely run in any browser without errors, as feature detection is always used with any potentially unsupported code. However, autotrack will only track features supported in the browser running it. For example, a user running Internet Explorer 8 will not be able to track media query usage, as media queries themselves aren't supported in Internet Explorer 8.\n\nAll autotrack plugins are tested in the following browsers:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/chrome/chrome_48x48.png\" alt=\"Chrome\"\u003e\u003cbr\u003e\n      ✔\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/firefox/firefox_48x48.png\" alt=\"Firefox\"\u003e\u003cbr\u003e\n      ✔\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/safari/safari_48x48.png\" alt=\"Safari\"\u003e\u003cbr\u003e\n      6+\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/edge/edge_48x48.png\" alt=\"Edge\"\u003e\u003cbr\u003e\n      ✔\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png\" alt=\"Internet Explorer\"\u003e\u003cbr\u003e\n      9+\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/opera/opera_48x48.png\" alt=\"Opera\"\u003e\u003cbr\u003e\n      ✔\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Translations\n\nThe following translations have been graciously provided by the community. Please note that these translations are unofficial and may be inaccurate or out of date:\n\n* [Chinese](https://github.com/stevezhuang/autotrack/blob/master/README.zh.md)\n* [French](https://github.com/DirtyF/autotrack/tree/french-translation)\n* [Japanese](https://github.com/nebosuker/autotrack)\n* [Korean](https://github.com/youngilcho/autotrack/tree/korean-translation)\n* [Polish](https://github.com/krisu7/autotrack)\n\nIf you discover issues with a particular translation, please file them with the appropriate repository. To submit your own translation, follow these steps:\n\n1. Fork this repository.\n2. Update the settings of your fork to [allow issues](https://softwareengineering.stackexchange.com/questions/179468/forking-a-repo-on-github-but-allowing-new-issues-on-the-fork).\n3. Remove all non-documentation files.\n4. Update the documentation files with your translated versions.\n5. Submit a pull request to this repository that adds a link to your fork to the above list.\n","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects","Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogleanalytics%2Fautotrack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogleanalytics%2Fautotrack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogleanalytics%2Fautotrack/lists"}