1 | <img
|
2 | src="../../../assets/svg/gtm.svg"
|
3 | alt="Google Tag Manager logo"
|
4 | height="100px"
|
5 | width="200px" />
|
6 |
|
7 | # Google Tag Manager (`gtag.js`)
|
8 | __homepage__: [google.com/analytics/tag-manager](https://www.google.com/analytics/tag-manager/)
|
9 | __docs__: [developers.google.com/tag-manager/devguide](https://developers.google.com/tag-manager/devguide)
|
10 | __import__: `import { Angulartics2GoogleTagManager } from 'angulartics2/gtm';`
|
11 |
|
12 |
|
13 | ## Initial Setup
|
14 |
|
15 | Add the full tracking code from Google Tag Manager to the beginning of your body tag.
|
16 |
|
17 | ## Include it in your application
|
18 |
|
19 | Bootstrapping the application with ```Angulartics2``` as provider and injecting both ```Angulartics2``` and ```Angulartics2GoogleTagManager``` (or any provider) into the root component will hook into the router and send every route change to your analytics provider.
|
20 |
|
21 |
|
22 | ```ts
|
23 | // component
|
24 | import { Angulartics2GoogleTagManager } from 'angulartics2/gtm';
|
25 |
|
26 | @Component({ ... })
|
27 | export class AppComponent {
|
28 | // import Angulartics2GoogleTagManager in root component
|
29 | constructor(angulartics2GoogleTagManager: Angulartics2GoogleTagManager) {
|
30 | angulartics2GoogleTagManager.startTracking();
|
31 | }
|
32 | }
|
33 | ```
|
34 |
|
35 | ```ts
|
36 | // bootstrap
|
37 | import { Angulartics2Module } from 'angulartics2';
|
38 |
|
39 | @NgModule({
|
40 | imports: [
|
41 | ...
|
42 | // import Angulartics2GoogleTagManager in root ngModule
|
43 | Angulartics2Module.forRoot()
|
44 | ],
|
45 | })
|
46 | ```
|
47 |
|
48 | ### Setting Up Tags
|
49 |
|
50 | Now is the time to setup tracking for the tags in GTM. [Here is a great post](http://blog.thecodecampus.de/angular-2-google-analytics-google-tag-manager/) on how to actually perform this setup. In essence here is the TLDR:
|
51 |
|
52 | 1. Create a new tag
|
53 | 2. Add Universal Analytics + Tracking ID from GA
|
54 | 3. Create a new "Fire On" trigger (Custom Event) that tracks the `Page View` (for `pageTrack()`)
|
55 |
|
56 | Make sure to debug it :D
|
57 |
|
58 | ### _For detailed instructions on how to send tracking events in a component or in a template check out the documentation for [Tracking Events](https://github.com/angulartics/angulartics2/wiki/Tracking-Events)._
|