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.
- package/angular-router.d.ts +3 -0
- package/angulartics2-core.d.ts +3 -0
- package/angulartics2.d.ts +1 -0
- package/angulartics2.module.d.ts +5 -0
- package/angulartics2On.d.ts +6 -0
- package/esm2020/angular-router.mjs +33 -0
- package/{esm2015/angulartics2-config.js → esm2020/angulartics2-config.mjs} +0 -0
- package/esm2020/angulartics2-core.mjs +93 -0
- package/{esm2015/angulartics2-interfaces.js → esm2020/angulartics2-interfaces.mjs} +0 -0
- package/{esm2015/angulartics2-token.js → esm2020/angulartics2-token.mjs} +0 -0
- package/{esm2015/angulartics2.js → esm2020/angulartics2.mjs} +0 -0
- package/esm2020/angulartics2.module.mjs +30 -0
- package/esm2020/angulartics2On.mjs +66 -0
- package/esm2020/providers/adobeanalytics/adobeanalytics.mjs +98 -0
- package/esm2020/providers/amplitude/amplitude.mjs +68 -0
- package/esm2020/providers/appinsights/appinsights.mjs +118 -0
- package/esm2020/providers/baidu/baidu.mjs +81 -0
- package/{esm2015/providers/clicky/clicky.interfaces.js → esm2020/providers/clicky/clicky.interfaces.mjs} +0 -0
- package/esm2020/providers/clicky/clicky.mjs +64 -0
- package/esm2020/providers/facebook/facebook.mjs +45 -0
- package/esm2020/providers/ga/ga.mjs +219 -0
- package/{esm2015/providers/ga-enhanced-ecom/ga-enhanced-ecom-options.js → esm2020/providers/ga-enhanced-ecom/ga-enhanced-ecom-options.mjs} +0 -0
- package/esm2020/providers/ga-enhanced-ecom/ga-enhanced-ecom.mjs +32 -0
- package/esm2020/providers/gosquared/gosquared.mjs +55 -0
- package/{esm2015/providers/gst/gst-interfaces.js → esm2020/providers/gst/gst-interfaces.mjs} +0 -0
- package/esm2020/providers/gst/gst.mjs +197 -0
- package/esm2020/providers/gtm/gtm.mjs +114 -0
- package/esm2020/providers/hubspot/hubspot.mjs +40 -0
- package/esm2020/providers/ibm-digital-analytics/ibm-digital-analytics.mjs +125 -0
- package/esm2020/providers/intercom/intercom.mjs +60 -0
- package/esm2020/providers/kissmetrics/kissmetrics.mjs +40 -0
- package/esm2020/providers/launch/launch.mjs +59 -0
- package/esm2020/providers/matomo/matomo.mjs +303 -0
- package/esm2020/providers/mixpanel/mixpanel.mjs +109 -0
- package/esm2020/providers/pyze/pyze.mjs +65 -0
- package/esm2020/providers/segment/segment.mjs +100 -0
- package/esm2020/providers/splunk/splunk.mjs +46 -0
- package/esm2020/providers/woopra/woopra.mjs +61 -0
- package/{esm2015/public_api.js → esm2020/public_api.mjs} +0 -0
- package/{esm2015/routerless.js → esm2020/routerless.mjs} +0 -0
- package/esm2020/routerless.module.mjs +28 -0
- package/fesm2015/{angulartics2.js → angulartics2.mjs} +201 -210
- package/fesm2015/angulartics2.mjs.map +1 -0
- package/fesm2020/angulartics2.mjs +2294 -0
- package/fesm2020/angulartics2.mjs.map +1 -0
- package/package.json +23 -11
- package/providers/adobeanalytics/README.md +12 -0
- package/providers/adobeanalytics/adobeanalytics.d.ts +3 -0
- package/providers/amplitude/README.md +12 -0
- package/providers/amplitude/amplitude.d.ts +3 -0
- package/providers/appinsights/README.md +12 -0
- package/providers/appinsights/appinsights.d.ts +3 -0
- package/providers/baidu/README.md +12 -0
- package/providers/baidu/baidu.d.ts +3 -0
- package/providers/clicky/README.md +93 -0
- package/providers/clicky/clicky.d.ts +3 -0
- package/providers/facebook/README.md +36 -0
- package/providers/facebook/facebook.d.ts +3 -0
- package/providers/ga/README.md +25 -0
- package/providers/ga/ga.d.ts +3 -0
- package/providers/ga-enhanced-ecom/README.md +12 -0
- package/providers/ga-enhanced-ecom/ga-enhanced-ecom.d.ts +3 -0
- package/providers/gosquared/README.md +12 -0
- package/providers/gosquared/gosquared.d.ts +3 -0
- package/providers/gst/README.md +110 -0
- package/providers/gst/gst.d.ts +3 -0
- package/providers/gtm/README.md +58 -0
- package/providers/gtm/gtm.d.ts +3 -0
- package/providers/hubspot/README.md +12 -0
- package/providers/hubspot/hubspot.d.ts +3 -0
- package/providers/ibm-digital-analytics/README.md +123 -0
- package/providers/ibm-digital-analytics/ibm-digital-analytics.d.ts +3 -0
- package/providers/intercom/README.md +12 -0
- package/providers/intercom/intercom.d.ts +3 -0
- package/providers/kissmetrics/README.md +12 -0
- package/providers/kissmetrics/kissmetrics.d.ts +3 -0
- package/providers/launch/README.md +59 -0
- package/providers/launch/launch.d.ts +3 -0
- package/providers/matomo/README.md +74 -0
- package/providers/matomo/matomo.d.ts +3 -0
- package/providers/mixpanel/README.md +105 -0
- package/providers/mixpanel/mixpanel.d.ts +3 -0
- package/providers/pyze/README.md +21 -0
- package/providers/pyze/pyze.d.ts +3 -0
- package/providers/segment/README.md +50 -0
- package/providers/segment/segment.d.ts +3 -0
- package/providers/splunk/README.md +57 -0
- package/providers/splunk/splunk.d.ts +3 -0
- package/providers/woopra/README.md +12 -0
- package/providers/woopra/woopra.d.ts +3 -0
- package/routerless.module.d.ts +5 -0
- package/angulartics2.metadata.json +0 -1
- package/bundles/angulartics2.umd.js +0 -2821
- package/bundles/angulartics2.umd.js.map +0 -1
- package/esm2015/angular-router.js +0 -36
- package/esm2015/angulartics2-core.js +0 -91
- package/esm2015/angulartics2.module.js +0 -25
- package/esm2015/angulartics2On.js +0 -55
- package/esm2015/providers/adobeanalytics/adobeanalytics.js +0 -102
- package/esm2015/providers/amplitude/amplitude.js +0 -70
- package/esm2015/providers/appinsights/appinsights.js +0 -120
- package/esm2015/providers/baidu/baidu.js +0 -83
- package/esm2015/providers/clicky/clicky.js +0 -68
- package/esm2015/providers/facebook/facebook.js +0 -47
- package/esm2015/providers/ga/ga.js +0 -208
- package/esm2015/providers/ga-enhanced-ecom/ga-enhanced-ecom.js +0 -30
- package/esm2015/providers/gosquared/gosquared.js +0 -57
- package/esm2015/providers/gst/gst.js +0 -182
- package/esm2015/providers/gtm/gtm.js +0 -107
- package/esm2015/providers/hubspot/hubspot.js +0 -42
- package/esm2015/providers/ibm-digital-analytics/ibm-digital-analytics.js +0 -127
- package/esm2015/providers/intercom/intercom.js +0 -62
- package/esm2015/providers/kissmetrics/kissmetrics.js +0 -42
- package/esm2015/providers/launch/launch.js +0 -61
- package/esm2015/providers/matomo/matomo.js +0 -305
- package/esm2015/providers/mixpanel/mixpanel.js +0 -111
- package/esm2015/providers/pyze/pyze.js +0 -67
- package/esm2015/providers/segment/segment.js +0 -102
- package/esm2015/providers/splunk/splunk.js +0 -48
- package/esm2015/providers/woopra/woopra.js +0 -63
- package/esm2015/routerless.module.js +0 -23
- 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`
|
package/providers/ga/ga.d.ts
CHANGED
@@ -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
|
package/providers/gst/gst.d.ts
CHANGED
@@ -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)._
|
package/providers/gtm/gtm.d.ts
CHANGED
@@ -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
|
}
|