angulartics2 13.1.0 → 14.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 (59) hide show
  1. package/README.md +2 -1
  2. package/angulartics2On.d.ts +1 -1
  3. package/esm2020/angular-router.mjs +4 -4
  4. package/esm2020/angulartics2-core.mjs +4 -4
  5. package/esm2020/angulartics2.module.mjs +5 -5
  6. package/esm2020/angulartics2On.mjs +8 -8
  7. package/esm2020/providers/adobeanalytics/adobeanalytics.mjs +4 -4
  8. package/esm2020/providers/amplitude/amplitude.mjs +4 -4
  9. package/esm2020/providers/appinsights/appinsights.mjs +4 -4
  10. package/esm2020/providers/baidu/baidu.mjs +4 -4
  11. package/esm2020/providers/clicky/clicky.mjs +4 -4
  12. package/esm2020/providers/facebook/facebook.mjs +4 -4
  13. package/esm2020/providers/ga/ga.mjs +4 -4
  14. package/esm2020/providers/ga-enhanced-ecom/ga-enhanced-ecom.mjs +4 -4
  15. package/esm2020/providers/gosquared/gosquared.mjs +4 -4
  16. package/esm2020/providers/gst/gst.mjs +4 -4
  17. package/esm2020/providers/gtm/gtm.mjs +4 -4
  18. package/esm2020/providers/hubspot/hubspot.mjs +4 -4
  19. package/esm2020/providers/ibm-digital-analytics/ibm-digital-analytics.mjs +4 -4
  20. package/esm2020/providers/intercom/intercom.mjs +4 -4
  21. package/esm2020/providers/kissmetrics/kissmetrics.mjs +4 -4
  22. package/esm2020/providers/launch/launch.mjs +4 -4
  23. package/esm2020/providers/matomo/matomo.mjs +4 -4
  24. package/esm2020/providers/mixpanel/mixpanel.mjs +4 -4
  25. package/esm2020/providers/posthog/posthog.mjs +4 -4
  26. package/esm2020/providers/pyze/pyze.mjs +4 -4
  27. package/esm2020/providers/segment/segment.mjs +4 -4
  28. package/esm2020/providers/splunk/splunk.mjs +4 -4
  29. package/esm2020/providers/woopra/woopra.mjs +4 -4
  30. package/esm2020/routerless.module.mjs +5 -5
  31. package/fesm2015/angulartics2.mjs +90 -90
  32. package/fesm2015/angulartics2.mjs.map +1 -1
  33. package/fesm2020/angulartics2.mjs +90 -90
  34. package/fesm2020/angulartics2.mjs.map +1 -1
  35. package/package.json +3 -3
  36. package/providers/adobeanalytics/README.md +0 -12
  37. package/providers/amplitude/README.md +0 -12
  38. package/providers/appinsights/README.md +0 -12
  39. package/providers/baidu/README.md +0 -12
  40. package/providers/clicky/README.md +0 -93
  41. package/providers/facebook/README.md +0 -36
  42. package/providers/ga/README.md +0 -25
  43. package/providers/ga-enhanced-ecom/README.md +0 -12
  44. package/providers/gosquared/README.md +0 -12
  45. package/providers/gst/README.md +0 -110
  46. package/providers/gtm/README.md +0 -58
  47. package/providers/hubspot/README.md +0 -12
  48. package/providers/ibm-digital-analytics/README.md +0 -123
  49. package/providers/incendium/README.md +0 -100
  50. package/providers/intercom/README.md +0 -12
  51. package/providers/kissmetrics/README.md +0 -12
  52. package/providers/launch/README.md +0 -59
  53. package/providers/matomo/README.md +0 -74
  54. package/providers/mixpanel/README.md +0 -105
  55. package/providers/posthog/README.md +0 -11
  56. package/providers/pyze/README.md +0 -21
  57. package/providers/segment/README.md +0 -50
  58. package/providers/splunk/README.md +0 -57
  59. package/providers/woopra/README.md +0 -12
@@ -1,12 +0,0 @@
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,59 +0,0 @@
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,74 +0,0 @@
1
- <img
2
- src="../../../assets/svg/matomo.svg"
3
- alt="Matomo logo"
4
- height="100px"
5
- width="200px" />
6
-
7
- # Matomo
8
- __homepage__: [matomo.org](https://matomo.org)
9
- __docs__: [developer.matomo.org](https://developer.matomo.org)
10
- __import__: `import { Angulartics2Matomo } from 'angulartics2';`
11
-
12
- ## Setup
13
- Add the standard matomo track code inside your index.html head tag:
14
- ```html
15
- <!-- Matomo -->
16
- <script type="text/javascript">
17
- var _paq = _paq || [];
18
- /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
19
- // _paq.push(['trackPageView']); // DELETE THIS LINE
20
- _paq.push(['enableLinkTracking']);
21
- (function() {
22
- var u="//matomo.YOUR-DOMAIN.com/";
23
- _paq.push(['setTrackerUrl', u+'matomo.php']);
24
- _paq.push(['setSiteId', '11']);
25
- var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
26
- g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
27
- })();
28
- </script>
29
- <!-- End Matomo Code -->
30
- ```
31
- Make sure "trackPageView" line is commented or deleted. It is not needed as page tracking will be trigger by the angular module on route change.
32
-
33
- Replace YOUR-DOMAIN with your matomo domain (`//DOMAIN.innocraft.cloud` if you are using the innocraft cloud service).
34
-
35
- Pass the Matomo provider to angulartics in app.module:
36
- ```ts
37
- import { Angulartics2Module } from 'angulartics2';
38
- import { Angulartics2Matomo } from 'angulartics2';
39
- @NgModule({
40
- imports: [
41
- Angulartics2Module.forRoot(),
42
- ...
43
- ```
44
-
45
- Inject angulartics into your root component (usually appComponent)
46
- ```ts
47
- import { Angulartics2Matomo } from 'angulartics2';
48
- export class AppComponent {
49
- // inject Angulartics2Matomo in root component and initialize it
50
- constructor(private angulartics2Matomo: Angulartics2Matomo) {
51
- angulartics2Matomo.startTracking();
52
- }
53
- }
54
- ```
55
-
56
- Tracking Custom Variables
57
- ```ts
58
- angulartics2.setUserProperties.next({index: 1, name: 'John', value: 123, scope: 'visit'});
59
- ```
60
- Note: To track multiple custom variables, call setUserProperties multiple times
61
-
62
- Tracking Custom Dimensions
63
- ```ts
64
- angulartics2.setUserProperties.next({
65
- dimension1: 'v1.2.3',
66
- dimension2: 'german',
67
- dimension43: 'green',
68
- });
69
- ```
70
- Note: Custom Variables and Custom Dimensions cannot be tracked in the same call, and requires separate setUserProperties calls
71
-
72
- To track full URLs if there is a hash (#), make sure to enable `settings=>websites=>settings=>page url fragments tracking` in the Matomo dashboard.
73
-
74
- Once set up, Angulartics [usage](https://github.com/angulartics/angulartics2#usage) is the same regardless of provider
@@ -1,105 +0,0 @@
1
- <img
2
- src="../../../assets/svg/mixpanel.svg"
3
- alt="Mixpanel logo"
4
- height="100px"
5
- width="200px" />
6
-
7
- # Mixpanel
8
-
9
- **homepage**: [mixpanel.com](https://mixpanel.com/)
10
- **docs**: [mixpanel.com/help/reference/javascript](https://mixpanel.com/help/reference/javascript)
11
- **import**: `import { Angulartics2Mixpanel } from 'angulartics2';`
12
-
13
- ## Setup
14
-
15
- 1. Add tracking code [provided by Mixpanel](https://mixpanel.com/help/reference/javascript) to right above the header closing tag `</header>`
16
- 2. [Setup Angulartics](https://github.com/angulartics/angulartics2/tree/next#installation) using `Angulartics2Mixpanel`
17
-
18
- ## Integrating with NgRx:
19
-
20
- You have a chance to unburden the integration process if your system is using NgRx. Specifically, we can reuse the existing actions in our application and use effects to catch and dispatch a mixpanel action accordingly.
21
-
22
- ### Boilerplating:
23
-
24
- ```ts
25
- /**
26
- * Action definition
27
- */
28
- export const MIXPANEL_TRACK = '[MIXPANEL] Track';
29
-
30
- export class MixpanelTrack implements Action {
31
- readonly type = MIXPANEL_TRACK;
32
-
33
- constructor(public payload: MixPanelPayload) {}
34
- }
35
-
36
- export interface MixPanelPayload {
37
- action: string;
38
- properties?: MixPanelPayloadProperties;
39
- }
40
-
41
- export interface MixPanelPayloadProperties {
42
- // Your custom properties go here
43
- }
44
- ```
45
-
46
- ### Catch and dispatch a mixpanel event by an effect:
47
-
48
- ```ts
49
- import { Injectable } from '@angular/core';
50
- import { Actions, Effect } from '@ngrx/effects';
51
- import { Angulartics2Mixpanel } from 'angulartics2';
52
-
53
- import * as mixpanel from '../actions/mixpanel';
54
-
55
- @Injectable()
56
- export class MixpanelEffects {
57
- @Effect({ dispatch: false })
58
- mixpanelActionTracking$ = this.actions$
59
- .ofType(mixpanel.MIXPANEL_TRACK)
60
- .do((action: mixpanel.MixpanelTrack) => {
61
- // ATTENTION HERE
62
- this.angulartics2Mixpanel.eventTrack(action.payload.action, {
63
- ...action.payload.properties,
64
- });
65
- });
66
-
67
- constructor(
68
- private actions$: Actions,
69
- private angulartics2Mixpanel: Angulartics2Mixpanel,
70
- ) {}
71
- }
72
- ```
73
-
74
- ### Usage:
75
-
76
- Somewhere in our application, we might have the code to dispatch a mixpanel action:
77
-
78
- ```ts
79
- @Effect()
80
- someEffect$ = this.actions$
81
- .ofType(some.ACTION)
82
- .map(action => new mixpanel.MixpanelTrack({
83
- action: action.type,
84
- properties: {
85
- category: 'Your Category',
86
- labelOrWhatever: 'LabelHere',
87
- }
88
- }));
89
- ```
90
-
91
- ### Common error:
92
-
93
- The custom properties object should be a **new object**, otherwise the action will not be recorded successfully. For example the code below will be ignored by the server.
94
-
95
- ```ts
96
- @Injectable()
97
- export class MixpanelEffects {
98
- ...
99
- .do((action: mixpanel.MixpanelTrack) => {
100
- // reuse the existing properties is WRONG
101
- this.angulartics2Mixpanel.eventTrack(action.payload.action, action.payload.properties);
102
- });
103
- ...
104
- }
105
- ```
@@ -1,11 +0,0 @@
1
- <img
2
- src="../../../assets/svg/posthog.svg"
3
- alt="Posthog logo"
4
- height="100px"
5
- width="200px" />
6
-
7
- # Posthog
8
-
9
- **homepage**: [posthog.com](https://posthog.com/)
10
- **docs**: [posthog.com/docs/product-analytics](https://posthog.com/docs/product-analytics)
11
- **import**: `import { Angulartics2Posthog } from 'angulartics2';`
@@ -1,21 +0,0 @@
1
- <img
2
- src="../../../assets/svg/pyze.svg"
3
- alt="pyze analytics logo"
4
- height="100px"
5
- width="200px" />
6
-
7
- # Pyze
8
-
9
- __homepage__: [pyze.com](https://www.pyze.com/)
10
- __docs__: [docs.pyze.com/web.html](https://docs.pyze.com/web.html)
11
- __import__: `import { Angulartics2Pyze } from 'angulartics2';`
12
-
13
- ## Setup
14
-
15
- 1. Add [tracking code provided by Pyze](https://docs.pyze.com/web.html#add-code-in-your-web-or-saas-app-to-use-the-pyze-sdk) inside the header tag.
16
-
17
- 2. Remember to replace `YOUR_PYZE_APP_KEY` placeholder with the [Pyze App Key](https://docs.pyze.com/web.html#get-pyze-app-key) obtained from [growth.pyze.com](https://growth.pyze.com)
18
-
19
- Note: You don't have to use `Pyze.postPageView("PageTitle", "Page URL");` api separately as it is called by angulartics for each page transition.
20
-
21
- 3. [Setup Angulartics](https://github.com/angulartics/angulartics2/tree/master#installation) using `Angulartics2Pyze`
@@ -1,50 +0,0 @@
1
- <img
2
- src="../../../assets/svg/segment.svg"
3
- alt="Segment logo"
4
- height="100px"
5
- width="200px" />
6
-
7
- # Segment
8
- __homepage__: [segment.com](https://segment.com/)
9
- __docs__: [segment.com/docs/sources/website/analytics.js](https://segment.com/docs/sources/website/analytics.js/)
10
- __import__: `import { Angulartics2Segment } from 'angulartics2';`
11
-
12
- ## Setup
13
- 1. Add `Angulartics2Module` to your root NgModule passing an array of providers to enable
14
- ```ts
15
- import { NgModule } from '@angular/core';
16
- import { BrowserModule } from '@angular/platform-browser';
17
- import { RouterModule, Routes } from '@angular/router';
18
-
19
- import { Angulartics2Module } from 'angulartics2';
20
- import { Angulartics2Segment } from 'angulartics2';
21
-
22
- const ROUTES: Routes = [
23
- { path: '', component: HomeComponent },
24
- { path: 'about', component: AboutComponent },
25
- ];
26
-
27
- @NgModule({
28
- imports: [
29
- BrowserModule,
30
- RouterModule.forRoot(ROUTES),
31
-
32
- // added to imports
33
- Angulartics2Module.forRoot([Angulartics2Segment]),
34
- ],
35
- declarations: [AppComponent],
36
- bootstrap: [AppComponent],
37
- })
38
- ```
39
- 2. __Required__: Import your providers in the root component. This starts the tracking of route changes.
40
- ```ts
41
- // component
42
- import { Angulartics2Segment } from 'angulartics2';
43
-
44
- @Component({ ... })
45
- export class AppComponent {
46
- constructor(angulartics2Segment: Angulartics2Segment) {
47
- angulartics2Segment.startTracking();
48
- }
49
- }
50
- ```
@@ -1,57 +0,0 @@
1
- <img
2
- src="../../../assets/svg/splunk.svg"
3
- alt="Splunk logo"
4
- height="100px"
5
- width="200px" />
6
-
7
- # Splunk
8
- __homepage__: [splunk.com](https://www.splunk.com/)
9
- __docs__: [Splunk Collector API](https://github.com/splunk/splunk-demo-collector-for-analyticsjs#api)
10
- __import__: `import { Angulartics2Splunk } from 'angulartics2';`
11
-
12
- ## Setup
13
- 1. Add tracking code [provided by Splunk](https://www.splunk.com/blog/2013/10/17/still-using-3rd-party-web-analytics-providers-build-your-own-using-splunk.html) to right above the `</head>` closing tag.
14
- ```
15
- <script type="text/javascript"> var sp=sp||[];(function(){var e=["init","identify","track","trackLink","pageview"],t=function(e){return function(){sp.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var n=0;n<e.length;n++)sp[e[n]]=t(e[n])})(),sp.load=function(e,o){sp._endpoint=e;if(o){sp.init(o)};var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"d21ey8j28ejz92.cloudfront.net/analytics/v1/sp.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};
16
- sp.load("https://www.example.com"); // Replace with your own collector URL
17
- </script>
18
- ```
19
- In the last line of above script, make sure to replace https://www.example.com with the address of your data collector.
20
-
21
- 2. [Setup Angulartics](https://github.com/angulartics/angulartics2/tree/next#installation) using `Angulartics2Splunk`.
22
- ```ts
23
- import { NgModule } from '@angular/core';
24
- import { BrowserModule } from '@angular/platform-browser';
25
- import { RouterModule, Routes } from '@angular/router';
26
-
27
- import { Angulartics2Module } from 'angulartics2';
28
-
29
- const ROUTES: Routes = [
30
- { path: '', component: HomeComponent },
31
- { path: 'about', component: AboutComponent },
32
- ];
33
-
34
- @NgModule({
35
- imports: [
36
- BrowserModule,
37
- RouterModule.forRoot(ROUTES),
38
-
39
- // added to imports
40
- Angulartics2Module.forRoot(),
41
- ],
42
- declarations: [AppComponent],
43
- bootstrap: [AppComponent],
44
- })
45
- ```
46
- 3. __Required__: Import your providers in the root component. This starts the tracking of route changes.
47
- ```ts
48
- // component
49
- import { Angulartics2Splunk } from 'angulartics2';
50
-
51
- @Component({ ... })
52
- export class AppComponent {
53
- constructor(angulartics2Splunk: Angulartics2Splunk) {
54
- angulartics2Splunk.startTracking();
55
- }
56
- }
57
- ```
@@ -1,12 +0,0 @@
1
- <img
2
- src="../../../assets/svg/woopra.svg"
3
- alt="Woopra logo"
4
- height="100px"
5
- width="200px" />
6
-
7
- # Woopra
8
- __homepage__: [woopra.com](https://www.woopra.com/)
9
- __docs__: [woopra.com/docs/setup/javascript-tracking/](https://www.woopra.com/docs/setup/javascript-tracking/)
10
- __import__: `import { Angulartics2Woopra } from 'angulartics2';`
11
-
12
- ## Setup