angulartics2 11.0.0 → 12.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/angular-router.d.ts +3 -0
  2. package/angulartics2-core.d.ts +3 -0
  3. package/angulartics2.d.ts +1 -0
  4. package/angulartics2.module.d.ts +5 -0
  5. package/angulartics2On.d.ts +6 -0
  6. package/esm2020/angular-router.mjs +33 -0
  7. package/{esm2015/angulartics2-config.js → esm2020/angulartics2-config.mjs} +0 -0
  8. package/esm2020/angulartics2-core.mjs +93 -0
  9. package/{esm2015/angulartics2-interfaces.js → esm2020/angulartics2-interfaces.mjs} +0 -0
  10. package/{esm2015/angulartics2-token.js → esm2020/angulartics2-token.mjs} +0 -0
  11. package/{esm2015/angulartics2.js → esm2020/angulartics2.mjs} +0 -0
  12. package/esm2020/angulartics2.module.mjs +30 -0
  13. package/esm2020/angulartics2On.mjs +66 -0
  14. package/esm2020/providers/adobeanalytics/adobeanalytics.mjs +98 -0
  15. package/esm2020/providers/amplitude/amplitude.mjs +68 -0
  16. package/esm2020/providers/appinsights/appinsights.mjs +118 -0
  17. package/esm2020/providers/baidu/baidu.mjs +81 -0
  18. package/{esm2015/providers/clicky/clicky.interfaces.js → esm2020/providers/clicky/clicky.interfaces.mjs} +0 -0
  19. package/esm2020/providers/clicky/clicky.mjs +64 -0
  20. package/esm2020/providers/facebook/facebook.mjs +45 -0
  21. package/esm2020/providers/ga/ga.mjs +219 -0
  22. package/{esm2015/providers/ga-enhanced-ecom/ga-enhanced-ecom-options.js → esm2020/providers/ga-enhanced-ecom/ga-enhanced-ecom-options.mjs} +0 -0
  23. package/esm2020/providers/ga-enhanced-ecom/ga-enhanced-ecom.mjs +32 -0
  24. package/esm2020/providers/gosquared/gosquared.mjs +55 -0
  25. package/{esm2015/providers/gst/gst-interfaces.js → esm2020/providers/gst/gst-interfaces.mjs} +0 -0
  26. package/esm2020/providers/gst/gst.mjs +197 -0
  27. package/esm2020/providers/gtm/gtm.mjs +114 -0
  28. package/esm2020/providers/hubspot/hubspot.mjs +40 -0
  29. package/esm2020/providers/ibm-digital-analytics/ibm-digital-analytics.mjs +125 -0
  30. package/esm2020/providers/intercom/intercom.mjs +60 -0
  31. package/esm2020/providers/kissmetrics/kissmetrics.mjs +40 -0
  32. package/esm2020/providers/launch/launch.mjs +59 -0
  33. package/esm2020/providers/matomo/matomo.mjs +303 -0
  34. package/esm2020/providers/mixpanel/mixpanel.mjs +109 -0
  35. package/esm2020/providers/pyze/pyze.mjs +65 -0
  36. package/esm2020/providers/segment/segment.mjs +100 -0
  37. package/esm2020/providers/splunk/splunk.mjs +46 -0
  38. package/esm2020/providers/woopra/woopra.mjs +61 -0
  39. package/{esm2015/public_api.js → esm2020/public_api.mjs} +0 -0
  40. package/{esm2015/routerless.js → esm2020/routerless.mjs} +0 -0
  41. package/esm2020/routerless.module.mjs +28 -0
  42. package/fesm2015/{angulartics2.js → angulartics2.mjs} +201 -210
  43. package/fesm2015/angulartics2.mjs.map +1 -0
  44. package/fesm2020/angulartics2.mjs +2294 -0
  45. package/fesm2020/angulartics2.mjs.map +1 -0
  46. package/package.json +23 -11
  47. package/providers/adobeanalytics/README.md +12 -0
  48. package/providers/adobeanalytics/adobeanalytics.d.ts +3 -0
  49. package/providers/amplitude/README.md +12 -0
  50. package/providers/amplitude/amplitude.d.ts +3 -0
  51. package/providers/appinsights/README.md +12 -0
  52. package/providers/appinsights/appinsights.d.ts +3 -0
  53. package/providers/baidu/README.md +12 -0
  54. package/providers/baidu/baidu.d.ts +3 -0
  55. package/providers/clicky/README.md +93 -0
  56. package/providers/clicky/clicky.d.ts +3 -0
  57. package/providers/facebook/README.md +36 -0
  58. package/providers/facebook/facebook.d.ts +3 -0
  59. package/providers/ga/README.md +25 -0
  60. package/providers/ga/ga.d.ts +3 -0
  61. package/providers/ga-enhanced-ecom/README.md +12 -0
  62. package/providers/ga-enhanced-ecom/ga-enhanced-ecom.d.ts +3 -0
  63. package/providers/gosquared/README.md +12 -0
  64. package/providers/gosquared/gosquared.d.ts +3 -0
  65. package/providers/gst/README.md +110 -0
  66. package/providers/gst/gst.d.ts +3 -0
  67. package/providers/gtm/README.md +58 -0
  68. package/providers/gtm/gtm.d.ts +3 -0
  69. package/providers/hubspot/README.md +12 -0
  70. package/providers/hubspot/hubspot.d.ts +3 -0
  71. package/providers/ibm-digital-analytics/README.md +123 -0
  72. package/providers/ibm-digital-analytics/ibm-digital-analytics.d.ts +3 -0
  73. package/providers/intercom/README.md +12 -0
  74. package/providers/intercom/intercom.d.ts +3 -0
  75. package/providers/kissmetrics/README.md +12 -0
  76. package/providers/kissmetrics/kissmetrics.d.ts +3 -0
  77. package/providers/launch/README.md +59 -0
  78. package/providers/launch/launch.d.ts +3 -0
  79. package/providers/matomo/README.md +74 -0
  80. package/providers/matomo/matomo.d.ts +3 -0
  81. package/providers/mixpanel/README.md +105 -0
  82. package/providers/mixpanel/mixpanel.d.ts +3 -0
  83. package/providers/pyze/README.md +21 -0
  84. package/providers/pyze/pyze.d.ts +3 -0
  85. package/providers/segment/README.md +50 -0
  86. package/providers/segment/segment.d.ts +3 -0
  87. package/providers/splunk/README.md +57 -0
  88. package/providers/splunk/splunk.d.ts +3 -0
  89. package/providers/woopra/README.md +12 -0
  90. package/providers/woopra/woopra.d.ts +3 -0
  91. package/routerless.module.d.ts +5 -0
  92. package/angulartics2.metadata.json +0 -1
  93. package/bundles/angulartics2.umd.js +0 -2821
  94. package/bundles/angulartics2.umd.js.map +0 -1
  95. package/esm2015/angular-router.js +0 -36
  96. package/esm2015/angulartics2-core.js +0 -91
  97. package/esm2015/angulartics2.module.js +0 -25
  98. package/esm2015/angulartics2On.js +0 -55
  99. package/esm2015/providers/adobeanalytics/adobeanalytics.js +0 -102
  100. package/esm2015/providers/amplitude/amplitude.js +0 -70
  101. package/esm2015/providers/appinsights/appinsights.js +0 -120
  102. package/esm2015/providers/baidu/baidu.js +0 -83
  103. package/esm2015/providers/clicky/clicky.js +0 -68
  104. package/esm2015/providers/facebook/facebook.js +0 -47
  105. package/esm2015/providers/ga/ga.js +0 -208
  106. package/esm2015/providers/ga-enhanced-ecom/ga-enhanced-ecom.js +0 -30
  107. package/esm2015/providers/gosquared/gosquared.js +0 -57
  108. package/esm2015/providers/gst/gst.js +0 -182
  109. package/esm2015/providers/gtm/gtm.js +0 -107
  110. package/esm2015/providers/hubspot/hubspot.js +0 -42
  111. package/esm2015/providers/ibm-digital-analytics/ibm-digital-analytics.js +0 -127
  112. package/esm2015/providers/intercom/intercom.js +0 -62
  113. package/esm2015/providers/kissmetrics/kissmetrics.js +0 -42
  114. package/esm2015/providers/launch/launch.js +0 -61
  115. package/esm2015/providers/matomo/matomo.js +0 -305
  116. package/esm2015/providers/mixpanel/mixpanel.js +0 -111
  117. package/esm2015/providers/pyze/pyze.js +0 -67
  118. package/esm2015/providers/segment/segment.js +0 -102
  119. package/esm2015/providers/splunk/splunk.js +0 -48
  120. package/esm2015/providers/woopra/woopra.js +0 -63
  121. package/esm2015/routerless.module.js +0 -23
  122. package/fesm2015/angulartics2.js.map +0 -1
@@ -1,6 +1,7 @@
1
1
  import { Title } from '@angular/platform-browser';
2
2
  import { Angulartics2 } from '../../angulartics2-core';
3
3
  import { ClickyProperties } from './clicky.interfaces';
4
+ import * as i0 from "@angular/core";
4
5
  export declare class Angulartics2Clicky {
5
6
  private angulartics2;
6
7
  private titleService;
@@ -25,4 +26,6 @@ export declare class Angulartics2Clicky {
25
26
  */
26
27
  eventOrGoalTrack(action: string, properties: Partial<ClickyProperties>): void;
27
28
  private validateType;
29
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2Clicky, never>;
30
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2Clicky>;
28
31
  }
@@ -0,0 +1,36 @@
1
+ <img
2
+ src="../../../assets/svg/facebook.svg"
3
+ alt="Facebook Pixel logo"
4
+ height="100px"
5
+ width="200px" />
6
+
7
+ # Facebook Pixel
8
+
9
+ __homepage__: [www.facebook.com/business/a/facebook-pixel](https://www.facebook.com/business/a/facebook-pixel)
10
+ __docs__: [developers.facebook.com/docs/facebook-pixel](https://developers.facebook.com/docs/facebook-pixel)
11
+ __import__: `import { Angulartics2Facebook } from 'angulartics2';`
12
+
13
+ ## Setup
14
+
15
+ 1. Add tracking code [provided by Facebook](https://www.facebook.com/events_manager/)
16
+ ```html
17
+ <!-- Facebook Pixel Code -->
18
+ <script>
19
+ !function(f,b,e,v,n,t,s)
20
+ {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
21
+ n.callMethod.apply(n,arguments):n.queue.push(arguments)};
22
+ if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
23
+ n.queue=[];t=b.createElement(e);t.async=!0;
24
+ t.src=v;s=b.getElementsByTagName(e)[0];
25
+ s.parentNode.insertBefore(t,s)}(window, document,'script',
26
+ 'https://connect.facebook.net/en_US/fbevents.js');
27
+ fbq('init', 'XXXXXXXXXXXXXXX');
28
+ fbq('track', 'PageView');
29
+ </script>
30
+ <noscript><img height="1" width="1" style="display:none"
31
+ src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1"
32
+ /></noscript>
33
+ <!-- End Facebook Pixel Code -->
34
+ ```
35
+ 2. Do **not** remove the pageview tracking (as you would to for Google Analytics)
36
+ 3. [Setup Angulartics](https://github.com/angulartics/angulartics2/tree/next#installation) using `Angulartics2Facebook`
@@ -1,4 +1,5 @@
1
1
  import { Angulartics2 } from '../../angulartics2-core';
2
+ import * as i0 from "@angular/core";
2
3
  export declare class Angulartics2Facebook {
3
4
  private angulartics2;
4
5
  constructor(angulartics2: Angulartics2);
@@ -9,4 +10,6 @@ export declare class Angulartics2Facebook {
9
10
  * @param action action associated with the event
10
11
  */
11
12
  eventTrack(action: string, properties?: any): void;
13
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2Facebook, never>;
14
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2Facebook>;
12
15
  }
@@ -0,0 +1,25 @@
1
+ <img
2
+ src="../../../assets/svg/ga.svg"
3
+ alt="google analytics logo"
4
+ height="100px"
5
+ width="200px" />
6
+
7
+ # Google Analytics (`analytics.js`)
8
+
9
+ __homepage__: [google.com/analytics](https://www.google.com/analytics)
10
+ __docs__: [developers.google.com/analytics/devguides/collection/analyticsjs/](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
11
+ __import__: `import { Angulartics2GoogleAnalytics } from 'angulartics2';`
12
+
13
+ ## Setup
14
+
15
+ 1. Add [`analytics.js` tracking code provided by Google](https://developers.google.com/analytics/devguides/collection/analyticsjs/) to the beginning of your body tag.
16
+ > Note: If Google Analytics suggest you use `gtag.js` tracking code, either switch to `analytics.js`, or have a look at the instructions for [Google Tag Manager](/src/lib/providers/gtm).
17
+ 2. Remove `ga('send', 'pageview');` to prevent duplicate pageview (as this is also done by angulartics):
18
+ ```html
19
+ <script>
20
+ ...
21
+ ga('create', 'UA-XXXXXXXX-X', 'none'); // 'none' while you are working on localhost
22
+ ga('send', 'pageview'); // DELETE THIS LINE!
23
+ </script>
24
+ ```
25
+ 3. [Setup Angulartics](https://github.com/angulartics/angulartics2/tree/master#installation) using `Angulartics2GoogleAnalytics`
@@ -1,6 +1,7 @@
1
1
  import { Angulartics2 } from '../../angulartics2-core';
2
2
  import { GoogleAnalyticsSettings } from '../../angulartics2-config';
3
3
  import { UserTimings } from '../../angulartics2-interfaces';
4
+ import * as i0 from "@angular/core";
4
5
  export declare class GoogleAnalyticsDefaults implements GoogleAnalyticsSettings {
5
6
  additionalAccountNames: any[];
6
7
  userId: any;
@@ -56,4 +57,6 @@ export declare class Angulartics2GoogleAnalytics {
56
57
  setUsername(userId: string): void;
57
58
  setUserProperties(properties: any): void;
58
59
  private setDimensionsAndMetrics;
60
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2GoogleAnalytics, never>;
61
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2GoogleAnalytics>;
59
62
  }
@@ -0,0 +1,12 @@
1
+ <img
2
+ src="../../../assets/svg/ga.svg"
3
+ alt="google analytics logo"
4
+ height="100px"
5
+ width="200px" />
6
+
7
+ # Google Analytics Enhanced Ecommerce
8
+ __homepage__: [google.com/analytics](https://www.google.com/analytics)
9
+ __docs__: [developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce](https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce)
10
+ __import__: `import { Angulartics2GoogleAnalyticsEnhancedEcommerce } from 'angulartics2';`
11
+
12
+ ## Setup
@@ -1,4 +1,5 @@
1
1
  import { GaEnhancedEcomAction, GaEnhancedEcomActionFieldObject, GaEnhancedEcomImpressionFieldObject, GaEnhancedEcomProductFieldObject } from './ga-enhanced-ecom-options';
2
+ import * as i0 from "@angular/core";
2
3
  export declare class Angulartics2GoogleAnalyticsEnhancedEcommerce {
3
4
  /**
4
5
  * Add impression in GA enhanced ecommerce tracking
@@ -15,4 +16,6 @@ export declare class Angulartics2GoogleAnalyticsEnhancedEcommerce {
15
16
  * @link https://developers.google.com/analytics/devguides/collection/analyticsjs/ecommerce
16
17
  */
17
18
  ecSetAction(action: GaEnhancedEcomAction, properties: Partial<GaEnhancedEcomActionFieldObject>): void;
19
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2GoogleAnalyticsEnhancedEcommerce, never>;
20
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2GoogleAnalyticsEnhancedEcommerce>;
18
21
  }
@@ -0,0 +1,12 @@
1
+ <img
2
+ src="../../../assets/svg/gosquared.svg"
3
+ alt="GoSquared logo"
4
+ height="100px"
5
+ width="200px" />
6
+
7
+ # GoSquared
8
+ __homepage__: [www.gosquared.com](https://www.gosquared.com/)
9
+ __docs__: [gosquared.com/docs](https://gosquared.com/docs)
10
+ __import__: `import { Angulartics2GoSquared } from 'angulartics2';`
11
+
12
+ ## Setup
@@ -1,4 +1,5 @@
1
1
  import { Angulartics2 } from '../../angulartics2-core';
2
+ import * as i0 from "@angular/core";
2
3
  export declare class Angulartics2GoSquared {
3
4
  private angulartics2;
4
5
  constructor(angulartics2: Angulartics2);
@@ -6,4 +7,6 @@ export declare class Angulartics2GoSquared {
6
7
  pageTrack(path: string): void;
7
8
  eventTrack(action: string, properties: any): void;
8
9
  setUserProperties(properties: any): void;
10
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2GoSquared, never>;
11
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2GoSquared>;
9
12
  }
@@ -0,0 +1,110 @@
1
+ <img
2
+ src="../../../assets/svg/gtm.svg"
3
+ alt="Google Global Site Tag logo"
4
+ height="100px"
5
+ width="200px" />
6
+
7
+ # Google Global Site Tag (`gtag.js`)
8
+
9
+ * __homepage__: [google.com/analytics](https://marketingplatform.google.com/about/analytics/)
10
+ * __docs__: [developers.google.com/analytics/devguides/collection/gtagjs](https://developers.google.com/analytics/devguides/collection/gtagjs/)
11
+ * __import__: `import { Angulartics2GoogleGlobalSiteTag } from 'angulartics2';`
12
+
13
+ ## Initial Setup
14
+
15
+ Add the full tracking code from [developers.google.com/analytics/devguides/collection/gtagjs/](https://developers.google.com/analytics/devguides/collection/gtagjs/)
16
+
17
+ ## Include it in your application
18
+
19
+ Bootstrapping the application with ```Angulartics2```:
20
+
21
+ ```ts
22
+ // bootstrap
23
+ import { Angulartics2Module } from 'angulartics2';
24
+
25
+ @NgModule({
26
+ imports: [
27
+ ...
28
+ // import Angulartics2GoogleGlobalSiteTag in root ngModule
29
+ Angulartics2Module.forRoot()
30
+ ],
31
+ })
32
+ export class AppModule { }
33
+ ```
34
+
35
+ Then injecting `Angulartics2GoogleGlobalSiteTag` (or any provider) into the root
36
+ component and calling `startTracking` will hook into the router and send every route
37
+ change to your analytics provider.
38
+
39
+ ```ts
40
+ // component
41
+ import { Angulartics2GoogleGlobalSiteTag } from 'angulartics2';
42
+
43
+ @Component({ ... })
44
+ export class AppComponent {
45
+ // import Angulartics2GoogleGlobalSiteTag in root component
46
+ constructor(angulartics: Angulartics2GoogleGlobalSiteTag) {
47
+ angulartics.startTracking();
48
+ }
49
+ }
50
+ ```
51
+
52
+ ## Send tracking events in a component or template
53
+
54
+ _Check out the documentation for [Tracking Events](https://github.com/angulartics/angulartics2/wiki/Tracking-Events)._
55
+
56
+ ## Extended Event properties.
57
+
58
+ All extended properties that can be added to events, for e-commerce (`items`, `shipping`, `tax`...), adwords (`send_to`, `account_type`, `transaction_id`) and another can be passed through the gstCustom:
59
+
60
+ ```ts
61
+ constructor(private angulartics2: Angulartics2) {
62
+ angulartics2.eventTrack.next({
63
+ action: 'conversion',
64
+ properties: {
65
+ gstCustom: {
66
+ send_to: 'AW-XXXXXX/R-12345678',
67
+ transaction_id: ''
68
+ }
69
+ }
70
+ });
71
+ }
72
+ ```
73
+
74
+ ## Custom dimension and tracker settings
75
+
76
+ `custom_map` and other config settings you could set inside your HTML page will be overridden after each pagetrack. Therefore, you need to pass them to the GST configuration if you want to use them. At this point, you're probably better to remove completely the `gtag('config'` call from you HTML page and to add all required properties at module definition.
77
+
78
+ ```ts
79
+ // bootstrap
80
+ import { Angulartics2Module } from 'angulartics2';
81
+
82
+ @NgModule({
83
+ imports: [
84
+ ...
85
+ // import Angulartics2GoogleGlobalSiteTag in root ngModule
86
+ Angulartics2Module.forRoot(
87
+ gst: {
88
+ trackingIds: ['UA-11111111-1'],
89
+ customMap: {
90
+ dimension1: 'version',
91
+ dimension2: 'page_language',
92
+ dimension3: 'custom_dimension_name'
93
+ },
94
+ anonymizeIp: true
95
+ },
96
+ )
97
+ ],
98
+ })
99
+ export class AppModule { }
100
+ ```
101
+
102
+ Then, you can use the normal angulartic approach:
103
+
104
+ ```ts
105
+ this.angulartics2.setUserProperties.next({
106
+ custom_dimension_name: 'example'
107
+ });
108
+ ```
109
+
110
+ You can also pass custom dimension with a specific event using the `gstCustom` property described in previous section
@@ -1,6 +1,7 @@
1
1
  import { GoogleGlobalSiteTagSettings } from '../../angulartics2-config';
2
2
  import { Angulartics2 } from '../../angulartics2-core';
3
3
  import { EventGst, UserTimingsGst } from './gst-interfaces';
4
+ import * as i0 from "@angular/core";
4
5
  export declare class GoogleGlobalSiteTagDefaults implements GoogleGlobalSiteTagSettings {
5
6
  trackingIds: string[];
6
7
  constructor();
@@ -54,4 +55,6 @@ export declare class Angulartics2GoogleGlobalSiteTag {
54
55
  private setDimensionsAndMetrics;
55
56
  private eventTrackInternal;
56
57
  private cleanProperties;
58
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2GoogleGlobalSiteTag, never>;
59
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2GoogleGlobalSiteTag>;
57
60
  }
@@ -0,0 +1,58 @@
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';`
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';
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)._
@@ -1,5 +1,6 @@
1
1
  import { Angulartics2 } from '../../angulartics2-core';
2
2
  import { GoogleTagManagerSettings } from '../../angulartics2-config';
3
+ import * as i0 from "@angular/core";
3
4
  export declare class GoogleTagManagerDefaults implements GoogleTagManagerSettings {
4
5
  userId: any;
5
6
  }
@@ -31,4 +32,6 @@ export declare class Angulartics2GoogleTagManager {
31
32
  * @param userId used to identify user cross-device in Google Analytics
32
33
  */
33
34
  setUsername(userId: string): void;
35
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2GoogleTagManager, never>;
36
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2GoogleTagManager>;
34
37
  }
@@ -0,0 +1,12 @@
1
+ <img
2
+ src="../../../assets/svg/hubspot.svg"
3
+ alt="HubSpot logo"
4
+ height="100px"
5
+ width="200px" />
6
+
7
+ # HubSpot
8
+ __homepage__: [www.hubspot.com](https://www.hubspot.com/)
9
+ __docs__: [developers.hubspot.com/docs/methods/tracking_code_api/tracking_code_overview](https://developers.hubspot.com/docs/methods/tracking_code_api/tracking_code_overview)
10
+ __import__: `import { Angulartics2Hubspot } from 'angulartics2';`
11
+
12
+ ## Setup
@@ -1,4 +1,5 @@
1
1
  import { Angulartics2 } from '../../angulartics2-core';
2
+ import * as i0 from "@angular/core";
2
3
  export declare class Angulartics2Hubspot {
3
4
  private angulartics2;
4
5
  constructor(angulartics2: Angulartics2);
@@ -6,4 +7,6 @@ export declare class Angulartics2Hubspot {
6
7
  pageTrack(path: string): void;
7
8
  eventTrack(action: string, properties: any): void;
8
9
  setUserProperties(properties: any): void;
10
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2Hubspot, never>;
11
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2Hubspot>;
9
12
  }
@@ -0,0 +1,123 @@
1
+ <img
2
+ src="../../../assets/svg/ibm.svg"
3
+ alt="IBM logo"
4
+ height="300px"
5
+ width="400px" />
6
+
7
+ # IBM Digital Analytics
8
+ __homepage__: [https://digitalanalytics.ibmcloud.com](https://digitalanalytics.ibmcloud.com)
9
+ __docs__: [https://www.ibm.com/support/knowledgecenter/SSPG9M/Analytics/kc_welcome_analytics.html](https://www.ibm.com/support/knowledgecenter/SSPG9M/Analytics/kc_welcome_analytics.html)
10
+ __import__: `import { Angulartics2IBMDigitalAnalytics } from 'angulartics2';`
11
+
12
+ ## Setup
13
+
14
+ Add the following IBM Digital Analytics code to your *index.html* file, before the closing body tag. Replace *XXXXXXXXX* with your Client ID and other *cmSetClientID* function parameters accordingly.
15
+
16
+ ```html
17
+ <script type="text/javascript" src="//libs.coremetrics.com/eluminate.js"></script>
18
+ <script type="text/javascript">
19
+ cmSetClientID("XXXXXXXXX", true, "data.coremetrics.com", "ibm.com");
20
+ </script>
21
+
22
+ ```
23
+
24
+ ## Usage
25
+
26
+ ### Import
27
+ ```ts
28
+ // app.module.ts
29
+ import { BrowserModule } from '@angular/platform-browser';
30
+ import { NgModule } from '@angular/core';
31
+ import { RouterModule, Routes, RouterOutlet } from '@angular/router';
32
+
33
+ import { AppComponent } from './app.component';
34
+
35
+ import { Angulartics2Module } from 'angulartics2';
36
+ import { PageComponent } from './page/page.component';
37
+ import { HomeComponent } from './home/home.component';
38
+
39
+ const ROUTES: Routes = [
40
+ { path: '', component: HomeComponent},
41
+ { path: 'page', component: PageComponent}
42
+ ];
43
+
44
+ @NgModule({
45
+ declarations: [
46
+ AppComponent,
47
+ PageComponent,
48
+ HomeComponent
49
+ ],
50
+ imports: [
51
+ BrowserModule,
52
+ RouterModule.forRoot(ROUTES),
53
+ Angulartics2Module.forRoot()
54
+ ],
55
+ providers: [],
56
+ bootstrap: [AppComponent]
57
+ })
58
+ export class AppModule { }
59
+ ```
60
+
61
+ ### Enable Auto Route Logging
62
+ ```ts
63
+ // app.component.ts
64
+ import { Component } from '@angular/core';
65
+ import { Angulartics2IBMDigitalAnalytics } from 'angulartics2';
66
+
67
+ @Component({
68
+ selector: 'app-root',
69
+ templateUrl: './app.component.html',
70
+ styleUrls: ['./app.component.css']
71
+ })
72
+ export class AppComponent {
73
+ // Enable route logging
74
+ constructor(angulartics2IBMDigitalAnalytics: Angulartics2IBMDigitalAnalytics) {
75
+ angulartics2IBMDigitalAnalytics.startTracking();
76
+ }
77
+ }
78
+ ```
79
+
80
+ ### Track Events in Template
81
+ ```html
82
+ <div
83
+ angulartics2On="click"
84
+ angularticsAction="cmCreateProductviewTag"
85
+ [angularticsProperties]="{'productId': '123', 'productName': 'Apples', 'categoryId': '777'}"
86
+ >Click Me for cmCreateProductviewTag</div>
87
+
88
+ <div
89
+ angulartics2On="click"
90
+ angularticsAction="cmCreateShopAction5Tag"
91
+ [angularticsProperties]="{'productId': '124', 'productName': 'Pears', 'quantity': '5', 'unitPrice': '1.99', 'categoryId': '778'}"
92
+ >Click Me for cmCreateShopAction5Tag</div>
93
+
94
+ <div
95
+ angulartics2On="click"
96
+ angularticsAction="cmCreateShopAction9Tag"
97
+ [angularticsProperties]="{'productId': '125', 'productName': 'Apricots', 'quantity': '6', 'unitPrice': '2.99', 'registrationId': '123456', 'orderId': '456', 'orderSubtotal': '29.90', 'categoryId': '779'}"
98
+ >Click Me for cmCreateShopAction9Tag</div>
99
+
100
+ <div
101
+ angulartics2On="click"
102
+ angularticsAction="cmCreateOrderTag"
103
+ [angularticsProperties]="{'orderId': '456', 'orderSubtotal': '29.90', 'orderShipping': '0', 'registrationId': '123456', 'registrantCity': 'Atlanta', 'registrantState': 'GA', 'registrantPostalCode': '30300'}"
104
+ >Click Me for cmCreateOrderTag</div>
105
+
106
+ <div
107
+ angulartics2On="click"
108
+ angularticsAction="cmCreateRegistrationTag"
109
+ [angularticsProperties]="{'registrationId': '123456', 'registrantEmail': 'john@example.com', 'registrantCity': 'Atlanta', 'registrantState': 'GA', 'registrantPostalCode': '30300', 'registrantCountry': 'US', 'attrbute': '3-_-SMOKING-_-DOUBLE'}"
110
+ >Click Me for cmCreateRegistrationTag</div>
111
+
112
+ <div
113
+ angulartics2On="click"
114
+ angularticsAction="cmCreateElementTag"
115
+ [angularticsProperties]="{'elementId': 'element123456', 'elementCategory': 'some elements'}"
116
+ >Click Me for cmCreateElementTag</div>
117
+
118
+ <div
119
+ angulartics2On="click"
120
+ angularticsAction="cmCreateConversionEventTag"
121
+ [angularticsProperties]="{'eventId': 'Request More Information', 'actionType': '2', 'eventCategoryId': 'Forms', 'points': '10'}"
122
+ >Click Me for cmCreateConversionEventTag</div>
123
+ ```
@@ -1,4 +1,5 @@
1
1
  import { Angulartics2 } from '../../angulartics2-core';
2
+ import * as i0 from "@angular/core";
2
3
  export declare class Angulartics2IBMDigitalAnalytics {
3
4
  private angulartics2;
4
5
  constructor(angulartics2: Angulartics2);
@@ -18,4 +19,6 @@ export declare class Angulartics2IBMDigitalAnalytics {
18
19
  * @param properties The properties that need to be logged with the event.
19
20
  */
20
21
  eventTrack(action: string, properties?: any): void;
22
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2IBMDigitalAnalytics, never>;
23
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2IBMDigitalAnalytics>;
21
24
  }
@@ -0,0 +1,12 @@
1
+ <img
2
+ src="../../../assets/svg/intercom.svg"
3
+ alt="Intercom logo"
4
+ height="100px"
5
+ width="200px" />
6
+
7
+ # Intercom
8
+ __homepage__: [www.intercom.com](https://www.intercom.com/)
9
+ __docs__: [developers.intercom.com/docs](https://developers.intercom.com/docs)
10
+ __import__: `import { Angulartics2Intercom } from 'angulartics2';`
11
+
12
+ ## Setup
@@ -1,4 +1,5 @@
1
1
  import { Angulartics2 } from '../../angulartics2-core';
2
+ import * as i0 from "@angular/core";
2
3
  export declare class Angulartics2Intercom {
3
4
  private angulartics2;
4
5
  constructor(angulartics2: Angulartics2);
@@ -6,4 +7,6 @@ export declare class Angulartics2Intercom {
6
7
  pageTrack(path: string): void;
7
8
  eventTrack(action: string, properties: any): void;
8
9
  setUserProperties(properties: any): void;
10
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2Intercom, never>;
11
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2Intercom>;
9
12
  }
@@ -0,0 +1,12 @@
1
+ <img
2
+ src="../../../assets/svg/kissmetrics.svg"
3
+ alt="Kissmetrics logo"
4
+ height="100px"
5
+ width="200px" />
6
+
7
+ # Kissmetrics
8
+ __homepage__: [kissmetrics.com/product/analyze/](https://www.kissmetrics.com/product/analyze/)
9
+ __docs__: [developers.kissmetrics.com/reference](https://developers.kissmetrics.com/reference)
10
+ __import__: `import { Angulartics2Kissmetrics } from 'angulartics2';`
11
+
12
+ ## Setup
@@ -1,4 +1,5 @@
1
1
  import { Angulartics2 } from '../../angulartics2-core';
2
+ import * as i0 from "@angular/core";
2
3
  export declare class Angulartics2Kissmetrics {
3
4
  private angulartics2;
4
5
  constructor(angulartics2: Angulartics2);
@@ -7,4 +8,6 @@ export declare class Angulartics2Kissmetrics {
7
8
  eventTrack(action: string, properties: any): void;
8
9
  setUsername(userId: string): void;
9
10
  setUserProperties(properties: any): void;
11
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2Kissmetrics, never>;
12
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2Kissmetrics>;
10
13
  }
@@ -0,0 +1,59 @@
1
+ <img
2
+ src="../../../assets/svg/launch.svg"
3
+ alt="Launch, by Adobe logo"
4
+ height="100px"
5
+ width="100px" />
6
+
7
+ # Launch, by Adobe
8
+ __homepage__: [Launch, by Adobe](https://www.adobe.com/experience-platform/launch.html)
9
+ __docs__: [developer.adobelaunch.com/](https://developer.adobelaunch.com/)
10
+ __import__: `import { Angulartics2LaunchByAdobe } from 'angulartics2';`
11
+
12
+
13
+ ## Initial Setup
14
+
15
+ Add your Launch embed code to the end of your head tag, as usual.
16
+
17
+ You can either add just the embed code with "async", or non-async embed code in the head plus the <code>_satellite.pageBottom()</code> snippet at the end of the body.
18
+
19
+ *Note: this provider works with [DTM](https://www.adobe.com/experience-platform/activation.html), too.*
20
+
21
+ ## Include it in your application
22
+
23
+ Bootstrapping the application with ```Angulartics2``` as provider and injecting both ```Angulartics2``` and ```Angulartics2LaunchByAdobe``` (or any provider) into the root component will hook into the router and send every route change to Launch, where it can be used for Analytics tracking or a lot of other things.
24
+
25
+
26
+ ```ts
27
+ // component
28
+ import { Angulartics2LaunchByAdobe } from 'angulartics2';
29
+
30
+ @Component({ ... })
31
+ export class AppComponent {
32
+ // import Angulartics2LaunchByAdobe in root component
33
+ constructor(angulartics2LaunchByAdobe: Angulartics2LaunchByAdobe) {
34
+ angulartics2LaunchByAdobe.startTracking();
35
+ }
36
+ }
37
+ ```
38
+
39
+ ```ts
40
+ // bootstrap
41
+ import { Angulartics2Module } from 'angulartics2';
42
+ import { Angulartics2LaunchByAdobe } from 'angulartics2';
43
+
44
+ @NgModule({
45
+ imports: [
46
+ ...
47
+ // import Angulartics2LaunchByAdobe in root ngModule
48
+ Angulartics2Module.forRoot();
49
+ ],
50
+ })
51
+ ```
52
+
53
+ ## Setting Up Tags
54
+
55
+ Once set up, Angulartics [usage](https://github.com/angulartics/angulartics2#usage) is the same regardless of provider. Route changes will be tracked using a "Direct call" Event named "pageTrack", and events or activities can be tracked using a "Direct call" Event named "eventTrack".
56
+
57
+ Now is the time to setup tracking in Launch. [Here is a post](http://webanalyticsfordevelopers.com/2018/11/06/basic-tracking-remix-contains-launch/) explaining how a basic tracking setup can be done.
58
+
59
+ _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)._
@@ -1,4 +1,5 @@
1
1
  import { Angulartics2 } from '../../angulartics2-core';
2
+ import * as i0 from "@angular/core";
2
3
  export declare class Angulartics2LaunchByAdobe {
3
4
  protected angulartics2: Angulartics2;
4
5
  payload: any;
@@ -12,4 +13,6 @@ export declare class Angulartics2LaunchByAdobe {
12
13
  * @param properties associated with the event
13
14
  */
14
15
  eventTrack(action: string, properties: any): void;
16
+ static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2LaunchByAdobe, never>;
17
+ static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2LaunchByAdobe>;
15
18
  }