{"id":1167,"date":"2017-02-15T20:19:35","date_gmt":"2017-02-15T19:19:35","guid":{"rendered":"https:\/\/blog.thecodecampus.de\/?p=1167"},"modified":"2025-04-22T10:46:44","modified_gmt":"2025-04-22T08:46:44","slug":"angular-2-include-google-analytics-event-tracking","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/","title":{"rendered":"Tutorial: Angular 2 & Google Analytics with Event tracking"},"content":{"rendered":"

In this post, I’ll show you how to add Google Analytics to an Angular 2 project. There is really no need to use an extra library for including Analytics since the setup is really simple. I will use the Angular CLI to create a new project and add a sample routing between site-a and site-b. The pageviews\u00a0will be tracked and\u00a0transferred to Google Analytics. In addition, I’ll show how to submit\u00a0evens to Analytics. For this\u00a0purpose a service will be implemented. The full source code is published at\u00a0Github<\/a>. For each step there is a single commit, which is linked in the respective headline.<\/p>\n

 <\/p>\n

Preparations<\/h2>\n

I will start by creating a new project through the Angular CLI. If you already have a project then you can of course also use this.<\/p>\n

ng new angular-analytics-example\r\ncd angular-analytics-example<br><\/pre>\n
 <\/p>\n
 <\/p>\n
Step 1: Add Typings for Google Analytics – (Code<\/a>)<\/h2>\n
Since we want to use TypeScripts typing-features we have to install the required typings via npm.<\/del><\/p>\n
npm install --save-dev @types\/google.analytics<\/pre>\n
Edit:\u00a0 There are currently some issues with those typings.\u00a0Alternatively you can also declare ga yourself by adding this line to your code. You dont need the package\u00a0@types\/google.analytics\u00a0 then!<\/strong><\/p>\n
declare let ga: Function;\r\n<\/code><\/pre>\n
 <\/p>\n
Step 2: Add Example Routes\u00a0– (Code<\/a>)<\/h2>\n
Since the application is currently still empty, I will now create two new components (site-a and site-b). If you are working in an existing project, you can skip until step 4.<\/p>\n
ng generate component site-a\r\nng generate component site-b\r\n<\/pre>\n
 <\/p>\n
\n\"Angular\n<\/picture>\n<\/a><\/p>\n
Step 3: Routing\u00a0– (Code<\/a>)<\/h2>\n
Now I must integrate the two created components with the routing. To do this, I first create the route configuration and then add the router-outlet\u00a0to\u00a0the AppComponent. Finally, the RouterModule\u00a0must be imported\u00a0in the AppModule. The route configuration will also be applied.<\/p>\n
import {Routes} from \"@angular\/router\";\r\nimport {SiteAComponent} from \".\/site-a\/site-a.component\";\r\nimport {SiteBComponent} from \".\/site-b\/site-b.component\";\r\n\r\nexport const appRoutes: Routes = [\r\n  {path: 'site-a', component: SiteAComponent},\r\n  {path: 'site-b', component: SiteBComponent},\r\n  {path: '**', redirectTo: '\/site-a'}\r\n];\r\n<\/pre>\n
<router-outlet><\/router-outlet>\r\n<\/pre>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { HttpModule } from '@angular\/http';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport {SiteAComponent} from \".\/site-a\/site-a.component\";\r\nimport {SiteBComponent} from \".\/site-b\/site-b.component\";\r\nimport {RouterModule} from \"@angular\/router\";\r\nimport {appRoutes} from \".\/app.routes\";\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    SiteAComponent,\r\n    SiteBComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    HttpModule,\r\n    RouterModule.forRoot(appRoutes),\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
Step 4: Add Google Analytics Tracking Code\u00a0– (Code<\/a>)<\/h2>\n
Now it’s time to include Analytics tracking code. Please note that we are in a single page application. Therefore, we must send the pageview\u00a0manually. To do this, we add\u00a0the tracking code to\u00a0the index.html file and then remove the last line since it is responsible for transmitting the pageview.<\/p>\n
To navigate at all, I have to add \u00a0two links to my example, so that the view can be switched between site-a and\u00a0site-b component. In order to be able to capture the pageviews manually, we will catch\u00a0the router events in the AppComponent and forward them to Google Analytics.<\/p>\n
Make sure to paste your own tracking code to the index.html and to remove the ga('send', 'pageview');<\/code> line!<\/p>\n
<!doctype html>\r\n<html>\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <title>AngularAnalyticsEvent<\/title>\r\n  <base href=\"\/\">\r\n\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n  <link rel=\"icon\" type=\"image\/x-icon\" href=\"favicon.ico\">\r\n<\/head>\r\n<body>\r\n  <app-root>Loading...<\/app-root>\r\n  <script>\r\n    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\r\n        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\r\n      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\r\n    })(window,document,'script','https:\/\/www.google-analytics.com\/analytics.js','ga');\r\n\r\n    ga('create', 'UA-XXXXXX-ID', 'auto');  \/\/ <- add the UA-ID from your tracking code\r\n                                           \/\/ <- remove the last line like me\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<p>\r\n  site-a works!\r\n<\/p>\r\n\r\n<a routerLink=\"\/site-b\">to Site B<\/a>\r\n<\/pre>\n
<p>\r\n  site-b works!\r\n<\/p>\r\n\r\n<a routerLink=\"\/site-a\">to Site A<\/a>\r\n<\/pre>\n
import {Component} from \"@angular\/core\";\r\nimport {Router, NavigationEnd} from \"@angular\/router\";\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n\r\n  constructor(public router: Router, public googleAnalyticsEventsService: GoogleAnalyticsEventsService) {\r\n    this.router.events.subscribe(event => {\r\n      if (event instanceof NavigationEnd) {\r\n        ga('set', 'page', event.urlAfterRedirects);\r\n        ga('send', 'pageview');\r\n      }\r\n    });\r\n  }\r\n\r\n}\r\n<\/pre>\n
That’s it already! Now the pageviews are sent to Google Analytics.<\/p>\n
 <\/p>\n
 <\/p>\n
Step 5: Event Tracking with Angular – (Code<\/a>)<\/h2>\n
In a real application, we can understand the user behavior even better if we submit some events to Google Analytics. In our example we will install a button. When the user clicks on it, an event is sent to Analytics.\u00a0In order to make the re-usability possible, I have stored the required code\u00a0in a service. We will add a button to our app components template and implement the method\u00a0submitEvent in the related TypeScript code.<\/p>\n
import {Injectable} from \"@angular\/core\";\r\n\r\n@Injectable()\r\nexport class GoogleAnalyticsEventsService {\r\n\r\n  public emitEvent(eventCategory: string,\r\n                   eventAction: string,\r\n                   eventLabel: string = null,\r\n                   eventValue: number = null) {\r\n    ga('send', 'event', {\r\n      eventCategory: eventCategory,\r\n      eventLabel: eventLabel,\r\n      eventAction: eventAction,\r\n      eventValue: eventValue\r\n    });\r\n  }\r\n}\r\n<\/pre>\n
import {GoogleAnalyticsEventsService} from \".\/google-analytics-events.service\";\r\n\r\n\/\/ [...]\r\n\r\n  providers: [\r\n    GoogleAnalyticsEventsService\r\n  ],<\/pre>\n
<router-outlet><\/router-outlet>\r\n\r\n<button (click)=\"submitEvent()\">\r\n  Submit an Event\r\n<\/button>\r\n<\/pre>\n
import {Component} from \"@angular\/core\";\r\nimport {Router, NavigationEnd} from \"@angular\/router\";\r\nimport {GoogleAnalyticsEventsService} from \".\/google-analytics-events.service\";\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n\r\n  constructor(public router: Router, public googleAnalyticsEventsService: GoogleAnalyticsEventsService) {\r\n    this.router.events.subscribe(event => {\r\n      if (event instanceof NavigationEnd) {\r\n        ga('set', 'page', event.urlAfterRedirects);\r\n        ga('send', 'pageview');\r\n      }\r\n    });\r\n  }\r\n  submitEvent() {\r\n    this.googleAnalyticsEventsService.emitEvent(\"testCategory\", \"testAction\", \"testLabel\", 10);\r\n  }\r\n\r\n}\r\n<\/pre>\n
Congratulations, we have already realized an event tracking with Angular 2! Check if everything works as\u00a0expected by using the real time overview in Google Analytics.<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
Working Page View Tracking:<\/p>\n
\"\"<\/a><\/p>\n
Working Event\u00a0Tracking:<\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In this post, I’ll show you how to add Google Analytics to an Angular 2 project. There is really no need to use an extra library for including Analytics since the setup is really simple. I will use the Angular CLI to create a new project and add a sample routing between site-a and site-b. […]
 READ MORE<\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,79],"tags":[],"class_list":["post-1167","post","type-post","status-publish","format-standard","hentry","category-angular","category-tooling"],"yoast_head":"\nTutorial: Angular 2 & Google Analytics with Event tracking - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Optimize Angular 2 with Google Analytics event tracking! Enhance insights, drive engagement, and boost performance seamlessly. Implement now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Angular 2 & Google Analytics with Event tracking - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Optimize Angular 2 with Google Analytics event tracking! Enhance insights, drive engagement, and boost performance seamlessly. Implement now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-15T19:19:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-22T08:46:44+00:00\" \/>\n<meta name=\"author\" content=\"theCodeCampus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"theCodeCampus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/\"},\"author\":{\"name\":\"theCodeCampus\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\"},\"headline\":\"Tutorial: Angular 2 & Google Analytics with Event tracking\",\"datePublished\":\"2017-02-15T19:19:35+00:00\",\"dateModified\":\"2025-04-22T08:46:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/\"},\"wordCount\":548,\"commentCount\":36,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_anne_WP_small.png\",\"articleSection\":[\"Angular\",\"Tooling\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/\",\"name\":\"Tutorial: Angular 2 & Google Analytics with Event tracking - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_anne_WP_small.png\",\"datePublished\":\"2017-02-15T19:19:35+00:00\",\"dateModified\":\"2025-04-22T08:46:44+00:00\",\"description\":\"Optimize Angular 2 with Google Analytics event tracking! Enhance insights, drive engagement, and boost performance seamlessly. Implement now!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_anne_WP_small.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_anne_WP_small.png\",\"width\":720,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-include-google-analytics-event-tracking\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial: Angular 2 & Google Analytics with Event tracking\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\",\"name\":\"theCodeCampus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"caption\":\"theCodeCampus\"},\"description\":\"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/thecodecampus\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: Angular 2 & Google Analytics with Event tracking - Web Development Blog","description":"Optimize Angular 2 with Google Analytics event tracking! Enhance insights, drive engagement, and boost performance seamlessly. Implement now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial: Angular 2 & Google Analytics with Event tracking - Web Development Blog","og_description":"Optimize Angular 2 with Google Analytics event tracking! Enhance insights, drive engagement, and boost performance seamlessly. Implement now!","og_url":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2017-02-15T19:19:35+00:00","article_modified_time":"2025-04-22T08:46:44+00:00","author":"theCodeCampus","twitter_card":"summary_large_image","twitter_misc":{"Written by":"theCodeCampus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/"},"author":{"name":"theCodeCampus","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc"},"headline":"Tutorial: Angular 2 & Google Analytics with Event tracking","datePublished":"2017-02-15T19:19:35+00:00","dateModified":"2025-04-22T08:46:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/"},"wordCount":548,"commentCount":36,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_anne_WP_small.png","articleSection":["Angular","Tooling"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/","url":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/","name":"Tutorial: Angular 2 & Google Analytics with Event tracking - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_anne_WP_small.png","datePublished":"2017-02-15T19:19:35+00:00","dateModified":"2025-04-22T08:46:44+00:00","description":"Optimize Angular 2 with Google Analytics event tracking! Enhance insights, drive engagement, and boost performance seamlessly. Implement now!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_anne_WP_small.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_anne_WP_small.png","width":720,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-include-google-analytics-event-tracking\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial: Angular 2 & Google Analytics with Event tracking"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc","name":"theCodeCampus","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","caption":"theCodeCampus"},"description":"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.","sameAs":["https:\/\/www.linkedin.com\/showcase\/thecodecampus\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=1167"}],"version-history":[{"count":23,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1167\/revisions"}],"predecessor-version":[{"id":3451,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1167\/revisions\/3451"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=1167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=1167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=1167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}