{"id":15485828,"url":"https://github.com/codediodeio/angular-gtag","last_synced_at":"2025-04-09T14:06:45.013Z","repository":{"id":32198891,"uuid":"131874753","full_name":"codediodeio/angular-gtag","owner":"codediodeio","description":":bookmark: Google Analytics gtag.js for Angular","archived":false,"fork":false,"pushed_at":"2022-12-29T13:28:47.000Z","size":312,"stargazers_count":108,"open_issues_count":41,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-19T07:02:10.931Z","etag":null,"topics":["angular","google-analytics","gtag"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codediodeio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-02T16:01:54.000Z","updated_at":"2024-08-13T20:01:17.000Z","dependencies_parsed_at":"2023-01-14T20:44:01.456Z","dependency_job_id":null,"html_url":"https://github.com/codediodeio/angular-gtag","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codediodeio%2Fangular-gtag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codediodeio%2Fangular-gtag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codediodeio%2Fangular-gtag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codediodeio%2Fangular-gtag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codediodeio","download_url":"https://codeload.github.com/codediodeio/angular-gtag/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054227,"owners_count":21039952,"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":["angular","google-analytics","gtag"],"created_at":"2024-10-02T06:03:34.919Z","updated_at":"2025-04-09T14:06:44.971Z","avatar_url":"https://github.com/codediodeio.png","language":"TypeScript","readme":"# Angular gtag.js\n\nA simple Google Analytics [gtag.js](https://developers.google.com/analytics/devguides/collection/gtagjs/) package for Angular.\n\n## Install\n\n```\nnpm install angular-gtag --save\n```\n\nAdd the the tracking code from GA admin dashboard to `index.html` and set _send_page_view_ to false.\n\n```html\n\u003chead\u003e\n\u003cscript async src=\"https://www.googletagmanager.com/gtag/js?id=UA-YOUR_TRACKING_ID\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n  gtag('config', 'UA-YOUR_TRACKING_ID', { 'send_page_view': false });\n\u003c/script\u003e\n\n\u003c/head\u003e\n```\n\nAdd the package to to your `app.module.ts`.\n\n```ts\nimport { GtagModule } from 'angular-gtag';\n\n@NgModule({\n  imports: [\n    GtagModule.forRoot({ trackingId: 'UA-YOUR_TRACKING_ID', trackPageviews: true })\n  ]\n})\n```\n\n**Options**\n\n- `trackingId: string (required)` Google Analytics UA tracking ID.\n- `trackPageviews: boolean` Default true.\n- `debug: boolean` Default false, console logs every gtag event/pageview.\n\n## Pageviews\n\nThe package will listen to route changes by default, you just need to instantiate service in the root of the project.\n\n```ts\nexport class AppComponent {\n  constructor(gtag: Gtag) {}\n}\n```\n\nGtag is a serivce that also allows you to track pageviews manually.\n\n```ts\ngtag.pageview();\n\n// or with custom params\n\ngtag.pageview({\n  page_title: 'Lesson Feed',\n  page_path: '/lessons',\n  page_location: 'https://angularfirebase.com/lessons'\n});\n```\n\n## Events\n\n[Events](https://developers.google.com/analytics/devguides/collection/gtagjs/events) expect an action.\n\n```ts\ngtag.event('view_promotion');\n```\n\nYou can optionally pass in addtional params.\n\n```ts\ngtag.event('login', {\n  method: 'Instagram',\n  event_category: 'engagemnt',\n  event_label: 'New user logged in via OAuth'\n});\n```\n\n## Event Directive\n\nMany analytics events are tracked based on user interaction, such as button clicks. Just tell it which DOM event to track.\n\n```html\n\u003cbutton gtagEvent trackOn=\"click\"\u003eTrack Me\u003c/button\u003e\n```\n\nThis will register a general event in GA based on the event name.\n\n![](https://firebasestorage.googleapis.com/v0/b/firestarter-96e46.appspot.com/o/assets%2Fevent-gtag.png?alt=media\u0026token=8f70e408-0300-472b-ab99-75893bef26fb)\n\nYou can pass optional params to the directive like so:\n\n```html\n\u003cdiv gtagEvent\n     trackOn=\"dragstart\"\n     action=\"product_dragged\"\n     category=\"ecommerce\"\n     [params]=\"{ event_label: 'Something cool just happened' }\"\u003e\n\n   Some Product...\n\n\u003c/div\u003e\n```\n\nThe directive will produce the following event on dragstart.\n![](https://firebasestorage.googleapis.com/v0/b/firestarter-96e46.appspot.com/o/assets%2Fevent-gtag2.png?alt=media\u0026token=213e2c60-6892-42a9-ac21-e828114e423a)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodediodeio%2Fangular-gtag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodediodeio%2Fangular-gtag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodediodeio%2Fangular-gtag/lists"}