angulartics2 13.0.0 → 14.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "angulartics2",
   "description": "Vendor-agnostic web analytics for Angular2 applications",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "release": {
     "branch": "master"
   },
@@ -32,8 +32,8 @@
     "pyze"
   ],
   "peerDependencies": {
-    "@angular/common": ">=14.0.0-0",
-    "@angular/core": ">=14.0.0-0",
+    "@angular/common": ">=15.0.0-0",
+    "@angular/core": ">=15.0.0-0",
     "rxjs": "^7.4.0"
   },
   "module": "fesm2015/angulartics2.mjs",

package/providers/posthog/posthog.d.ts

@@ -0,0 +1,20 @@
+import * as i0 from "@angular/core";
+export declare class Angulartics2Posthog {
+    private readonly angulartics2;
+    constructor();
+    startTracking(): void;
+    startPageTracking(): void;
+    startEventTracking(): void;
+    pageTrack(path: string | undefined): void;
+    eventTrack(action: string, properties?: any): void;
+    setUsername(userId: string | {
+        userId: string | number;
+    }): void;
+    setUserProperties(properties: any | undefined): void;
+    setUserPropertiesOnce(properties: any | undefined): void;
+    setSuperProperties(properties: any | undefined): void;
+    setSuperPropertiesOnce(properties: any | undefined): void;
+    setAlias(alias: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Angulartics2Posthog, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<Angulartics2Posthog>;
+}

package/public_api.d.ts

@@ -19,6 +19,7 @@ export * from './providers/hubspot/hubspot';
 export * from './providers/kissmetrics/kissmetrics';
 export * from './providers/launch/launch';
 export * from './providers/mixpanel/mixpanel';
+export * from './providers/posthog/posthog';
 export * from './providers/pyze/pyze';
 export * from './providers/matomo/matomo';
 export * from './providers/segment/segment';

package/providers/adobeanalytics/README.md

@@ -1,12 +0,0 @@
-<img 
-    src="../../../assets/svg/adobeanalytics.svg" 
-    alt="Adobe Analytics Cloud logo"
-    height="100px"
-    width="200px" />
-
-# Adobe Analytics Cloud
-__homepage__: [adobe.com/data-analytics-cloud/analytics.html](http://www.adobe.com/data-analytics-cloud/analytics.html)  
-__docs__: [marketing.adobe.com/resources/help/en_US/sc/implement/impl_js_file.html](https://marketing.adobe.com/resources/help/en_US/sc/implement/impl_js_file.html)  
-__import__: `import { Angulartics2AdobeAnalytics } from 'angulartics2';`  
-
-## Setup

package/providers/amplitude/README.md

@@ -1,12 +0,0 @@
-<img 
-    src="../../../assets/svg/amplitude.svg" 
-    alt="Amplitude logo"
-    height="100px"
-    width="200px" />
-
-# Amplitude
-__homepage__: [www.amplitude.com](https://www.amplitude.com/)  
-__docs__: [amplitude.zendesk.com/hc](https://amplitude.zendesk.com/hc)  
-__import__: `import { Angulartics2Amplitude } from 'angulartics2';`  
-
-## Setup

package/providers/appinsights/README.md

@@ -1,12 +0,0 @@
-<img 
-    src="../../../assets/svg/appinsights.svg" 
-    alt="Microsoft Application Insights logo"
-    height="100px"
-    width="200px" />
-
-# Microsoft Application Insights
-__homepage__: [azure.microsoft.com/en-us/services/application-insights/](https://azure.microsoft.com/en-us/services/application-insights/)  
-__docs__: [github.com/Microsoft/ApplicationInsights-JS](https://github.com/Microsoft/ApplicationInsights-JS#microsoft-application-insights-javascript-sdk)  
-__import__: `import { Angulartics2AppInsights } from 'angulartics2';`  
-
-## Setup

package/providers/baidu/README.md

@@ -1,12 +0,0 @@
-<img 
-    src="../../../assets/svg/baidu.svg" 
-    alt="Baidu logo"
-    height="100px"
-    width="200px" />
-
-# Baidu
-__homepage__: [tongji.baidu.com/web/welcome/login](https://tongji.baidu.com/web/welcome/login)  
-__docs__: ???
-__import__: `import { Angulartics2BaiduAnalytics } from 'angulartics2';`  
-
-## Setup

package/providers/clicky/README.md

@@ -1,93 +0,0 @@
-<img 
-    src="../../../assets/svg/clicky.svg" 
-    alt="Clicky logo"
-    height="100px"
-    width="200px" />
-
-# Clicky
-__homepage__: [clicky.com](https://clicky.com/)  
-__docs__: [clicky.com/help/](https://clicky.com/help/)  
-__import__: `import { Angulartics2Clicky } from 'angulartics2';`  
-
-## Setup
-
-Add the following clicky code to your *index.html* file, before the closing body tag. Replace *XXXX* with your Clicky Site ID.
-
-```html
-<script type="text/javascript">
-  var clicky_custom = {
-    pageview_disable : 1,
-    history_disable : 1
-  };
-</script>
-<script src="//static.getclicky.com/js" type="text/javascript"></script>
-<script type="text/javascript">try{ clicky.init(XXXXX); }catch(e){}</script>
-```
-
-## Usage
-
-### Import
-```ts
-// app.module.ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes, RouterOutlet } from '@angular/router';
-
-import { AppComponent } from './app.component';
-
-import { Angulartics2Module } from 'angulartics2';
-import { PageComponent } from './page/page.component';
-import { HomeComponent } from './home/home.component';
-
-const ROUTES: Routes = [
-  { path: '', component: HomeComponent},
-  { path: 'page', component: PageComponent}
-];
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    PageComponent,
-    HomeComponent
-  ],
-  imports: [
-    BrowserModule,
-    RouterModule.forRoot(ROUTES),
-    Angulartics2Module.forRoot()
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-### Enable Auto Route Logging
-```ts
-// app.component.ts 
-import { Component } from '@angular/core';
-import { Angulartics2Clicky } from 'angulartics2-clicky';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent {
-  // Enable auto route logging
-  constructor(angulartics2Clicky: Angulartics2Clicky) {
-    angulartics2Clicky.startTracking();
-  }
-}
-```
-
-### Track Events & Goals
-```html
-  <li>
-    <!-- Track Events -->
-    <button angulartics2On="click" angularticsAction="event-button" [angularticsProperties]="{title: 'Event Button Clicked'}">Track Button Click Event 1</button>
-  </li>
-  <li>
-    <!-- Track Goals -->
-    <button angulartics2On="click" angularticsAction="event-button" [angularticsProperties]="{goal: 'Goal #1', revenue: 500, noQueue: true}">Goal Button</button>
-  </li>
-```

package/providers/facebook/README.md

@@ -1,36 +0,0 @@
-<img 
-    src="../../../assets/svg/facebook.svg" 
-    alt="Facebook Pixel logo"
-    height="100px"
-    width="200px" />
-
-# Facebook Pixel
-
-__homepage__: [www.facebook.com/business/a/facebook-pixel](https://www.facebook.com/business/a/facebook-pixel)  
-__docs__: [developers.facebook.com/docs/facebook-pixel](https://developers.facebook.com/docs/facebook-pixel)  
-__import__: `import { Angulartics2Facebook } from 'angulartics2';`  
-
-## Setup
-
-1. Add tracking code [provided by Facebook](https://www.facebook.com/events_manager/)
-```html
- <!-- Facebook Pixel Code -->
-  <script>
-    !function(f,b,e,v,n,t,s)
-    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
-    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
-    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
-    n.queue=[];t=b.createElement(e);t.async=!0;
-    t.src=v;s=b.getElementsByTagName(e)[0];
-    s.parentNode.insertBefore(t,s)}(window, document,'script',
-    'https://connect.facebook.net/en_US/fbevents.js');
-    fbq('init', 'XXXXXXXXXXXXXXX');
-    fbq('track', 'PageView');
-  </script>
-  <noscript><img height="1" width="1" style="display:none"
-    src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1"
-  /></noscript>
-  <!-- End Facebook Pixel Code -->
-```
-2. Do **not** remove the pageview tracking (as you would to for Google Analytics)
-3. [Setup Angulartics](https://github.com/angulartics/angulartics2/tree/next#installation) using `Angulartics2Facebook`

package/providers/ga/README.md

@@ -1,25 +0,0 @@
-<img 
-    src="../../../assets/svg/ga.svg" 
-    alt="google analytics logo"
-    height="100px"
-    width="200px" />
-
-# Google Analytics (`analytics.js`)
-
-__homepage__: [google.com/analytics](https://www.google.com/analytics)  
-__docs__: [developers.google.com/analytics/devguides/collection/analyticsjs/](https://developers.google.com/analytics/devguides/collection/analyticsjs/)  
-__import__: `import { Angulartics2GoogleAnalytics } from 'angulartics2';`  
-
-## Setup
-
-1. Add [`analytics.js` tracking code provided by Google](https://developers.google.com/analytics/devguides/collection/analyticsjs/) to the beginning of your body tag.
-> 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).
-2. Remove `ga('send', 'pageview');` to prevent duplicate pageview (as this is also done by angulartics):
-```html
-<script>
-  ...
-  ga('create', 'UA-XXXXXXXX-X', 'none'); // 'none' while you are working on localhost
-  ga('send', 'pageview');  // DELETE THIS LINE!
-</script>
-```
-3. [Setup Angulartics](https://github.com/angulartics/angulartics2/tree/master#installation) using `Angulartics2GoogleAnalytics`

package/providers/ga-enhanced-ecom/README.md

@@ -1,12 +0,0 @@
-<img 
-    src="../../../assets/svg/ga.svg" 
-    alt="google analytics logo"
-    height="100px"
-    width="200px" />
-
-# Google Analytics Enhanced Ecommerce
-__homepage__: [google.com/analytics](https://www.google.com/analytics)  
-__docs__: [developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce](https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce)  
-__import__: `import { Angulartics2GoogleAnalyticsEnhancedEcommerce } from 'angulartics2';`  
-
-## Setup

package/providers/gosquared/README.md

@@ -1,12 +0,0 @@
-<img 
-    src="../../../assets/svg/gosquared.svg" 
-    alt="GoSquared logo"
-    height="100px"
-    width="200px" />
-
-# GoSquared
-__homepage__: [www.gosquared.com](https://www.gosquared.com/)  
-__docs__: [gosquared.com/docs](https://gosquared.com/docs)  
-__import__: `import { Angulartics2GoSquared } from 'angulartics2';`  
-
-## Setup

package/providers/gst/README.md

@@ -1,110 +0,0 @@
-<img 
-    src="../../../assets/svg/gtm.svg" 
-    alt="Google Global Site Tag logo"
-    height="100px"
-    width="200px" />
-
-# Google Global Site Tag (`gtag.js`)
-
-* __homepage__: [google.com/analytics](https://marketingplatform.google.com/about/analytics/)
-* __docs__: [developers.google.com/analytics/devguides/collection/gtagjs](https://developers.google.com/analytics/devguides/collection/gtagjs/)
-* __import__: `import { Angulartics2GoogleGlobalSiteTag } from 'angulartics2';`
-
-## Initial Setup
-
-Add the full tracking code from [developers.google.com/analytics/devguides/collection/gtagjs/](https://developers.google.com/analytics/devguides/collection/gtagjs/)
-
-## Include it in your application
-
-Bootstrapping the application with ```Angulartics2```:
-
-```ts
-// bootstrap
-import { Angulartics2Module } from 'angulartics2';
-
-@NgModule({
-  imports: [
-    ...
-    // import Angulartics2GoogleGlobalSiteTag in root ngModule
-    Angulartics2Module.forRoot()
-  ],
-})
-export class AppModule { }
-```
-
-Then injecting `Angulartics2GoogleGlobalSiteTag` (or any provider) into the root
-component and calling `startTracking` will hook into the router and send every route
-change to your analytics provider.
-
-```ts
-// component
-import { Angulartics2GoogleGlobalSiteTag } from 'angulartics2';
-
-@Component({ ... })
-export class AppComponent {
-  // import Angulartics2GoogleGlobalSiteTag in root component
-  constructor(angulartics: Angulartics2GoogleGlobalSiteTag) {
-    angulartics.startTracking();
-  }
-}
-```
-
-## Send tracking events in a component or template
-
-_Check out the documentation for [Tracking Events](https://github.com/angulartics/angulartics2/wiki/Tracking-Events)._
-
-## Extended Event properties.
-
-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:
-
-```ts
-constructor(private angulartics2: Angulartics2) {
-  angulartics2.eventTrack.next({
-    action: 'conversion',
-    properties: {
-      gstCustom: {
-        send_to: 'AW-XXXXXX/R-12345678',
-        transaction_id: ''
-      }
-    }
-  });
-}
-```
-
-## Custom dimension and tracker settings
-
-`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.
-
-```ts
-// bootstrap
-import { Angulartics2Module } from 'angulartics2';
-
-@NgModule({
-  imports: [
-    ...
-    // import Angulartics2GoogleGlobalSiteTag in root ngModule
-    Angulartics2Module.forRoot(
-      gst: {
-        trackingIds: ['UA-11111111-1'],
-        customMap: {
-          dimension1: 'version',
-          dimension2: 'page_language',
-          dimension3: 'custom_dimension_name'
-        },
-        anonymizeIp: true
-      },
-    )
-  ],
-})
-export class AppModule { }
-```
-
-Then, you can use the normal angulartic approach:
-
-```ts
-this.angulartics2.setUserProperties.next({
-  custom_dimension_name: 'example'
-});
-```
-
-You can also pass custom dimension with a specific event using the `gstCustom` property described in previous section

package/providers/gtm/README.md

@@ -1,58 +0,0 @@
-<img 
-    src="../../../assets/svg/gtm.svg" 
-    alt="Google Tag Manager logo"
-    height="100px"
-    width="200px" />
-
-# Google Tag Manager (`gtag.js`)
-__homepage__: [google.com/analytics/tag-manager](https://www.google.com/analytics/tag-manager/)  
-__docs__: [developers.google.com/tag-manager/devguide](https://developers.google.com/tag-manager/devguide)  
-__import__: `import { Angulartics2GoogleTagManager } from 'angulartics2';`  
-
-
-## Initial Setup
-
-Add the full tracking code from Google Tag Manager to the beginning of your body tag.
-
-## Include it in your application
-
-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.
-
-
-```ts
-// component
-import { Angulartics2GoogleTagManager } from 'angulartics2';
-
-@Component({ ... })
-export class AppComponent {
-  // import Angulartics2GoogleTagManager in root component
-  constructor(angulartics2GoogleTagManager: Angulartics2GoogleTagManager) {
-    angulartics2GoogleTagManager.startTracking();
-  }
-}
-```
-
-```ts
-// bootstrap
-import { Angulartics2Module } from 'angulartics2';
-
-@NgModule({
-  imports: [
-    ...
-    // import Angulartics2GoogleTagManager in root ngModule    
-    Angulartics2Module.forRoot()
-  ],
-})
-```
-
-### Setting Up Tags
-
-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:
-
-1. Create a new tag
-2. Add Universal Analytics + Tracking ID from GA
-3. Create a new "Fire On" trigger (Custom Event) that tracks the `Page View` (for `pageTrack()`)
-
-Make sure to debug it :D
-
-### _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/hubspot/README.md

@@ -1,12 +0,0 @@
-<img 
-    src="../../../assets/svg/hubspot.svg" 
-    alt="HubSpot logo"
-    height="100px"
-    width="200px" />
-
-# HubSpot
-__homepage__: [www.hubspot.com](https://www.hubspot.com/)  
-__docs__: [developers.hubspot.com/docs/methods/tracking_code_api/tracking_code_overview](https://developers.hubspot.com/docs/methods/tracking_code_api/tracking_code_overview)  
-__import__: `import { Angulartics2Hubspot } from 'angulartics2';`  
-
-## Setup

package/providers/ibm-digital-analytics/README.md

@@ -1,123 +0,0 @@
-<img 
-    src="../../../assets/svg/ibm.svg" 
-    alt="IBM logo"
-    height="300px"
-    width="400px" />
-
-# IBM Digital Analytics
-__homepage__: [https://digitalanalytics.ibmcloud.com](https://digitalanalytics.ibmcloud.com)  
-__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)  
-__import__: `import { Angulartics2IBMDigitalAnalytics } from 'angulartics2';`  
-
-## Setup
-
-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.
-
-```html
-<script type="text/javascript" src="//libs.coremetrics.com/eluminate.js"></script>
-<script type="text/javascript">
-    cmSetClientID("XXXXXXXXX", true, "data.coremetrics.com", "ibm.com");
-</script>
-
-```
-
-## Usage
-
-### Import
-```ts
-// app.module.ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes, RouterOutlet } from '@angular/router';
-
-import { AppComponent } from './app.component';
-
-import { Angulartics2Module } from 'angulartics2';
-import { PageComponent } from './page/page.component';
-import { HomeComponent } from './home/home.component';
-
-const ROUTES: Routes = [
-  { path: '', component: HomeComponent},
-  { path: 'page', component: PageComponent}
-];
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    PageComponent,
-    HomeComponent
-  ],
-  imports: [
-    BrowserModule,
-    RouterModule.forRoot(ROUTES),
-    Angulartics2Module.forRoot()
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-### Enable Auto Route Logging
-```ts
-// app.component.ts 
-import { Component } from '@angular/core';
-import { Angulartics2IBMDigitalAnalytics } from 'angulartics2';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent {
-  // Enable route logging
-  constructor(angulartics2IBMDigitalAnalytics: Angulartics2IBMDigitalAnalytics) {
-      angulartics2IBMDigitalAnalytics.startTracking();
-  }
-}
-```
-
-### Track Events in Template
-```html
-<div 
-    angulartics2On="click" 
-    angularticsAction="cmCreateProductviewTag" 
-    [angularticsProperties]="{'productId': '123', 'productName': 'Apples', 'categoryId': '777'}"
->Click Me for cmCreateProductviewTag</div>
-
-<div 
-    angulartics2On="click" 
-    angularticsAction="cmCreateShopAction5Tag" 
-    [angularticsProperties]="{'productId': '124', 'productName': 'Pears', 'quantity': '5', 'unitPrice': '1.99', 'categoryId': '778'}"
->Click Me for cmCreateShopAction5Tag</div>
-
-<div 
-    angulartics2On="click" 
-    angularticsAction="cmCreateShopAction9Tag" 
-    [angularticsProperties]="{'productId': '125', 'productName': 'Apricots', 'quantity': '6', 'unitPrice': '2.99', 'registrationId': '123456', 'orderId': '456', 'orderSubtotal': '29.90', 'categoryId': '779'}"
->Click Me for cmCreateShopAction9Tag</div>
-
-<div 
-    angulartics2On="click" 
-    angularticsAction="cmCreateOrderTag" 
-    [angularticsProperties]="{'orderId': '456', 'orderSubtotal': '29.90', 'orderShipping': '0', 'registrationId': '123456', 'registrantCity': 'Atlanta', 'registrantState': 'GA', 'registrantPostalCode': '30300'}"
->Click Me for cmCreateOrderTag</div>
-
-<div 
-    angulartics2On="click" 
-    angularticsAction="cmCreateRegistrationTag" 
-    [angularticsProperties]="{'registrationId': '123456', 'registrantEmail': 'john@example.com', 'registrantCity': 'Atlanta', 'registrantState': 'GA', 'registrantPostalCode': '30300', 'registrantCountry': 'US', 'attrbute': '3-_-SMOKING-_-DOUBLE'}"
->Click Me for cmCreateRegistrationTag</div>
-
-<div 
-    angulartics2On="click" 
-    angularticsAction="cmCreateElementTag" 
-    [angularticsProperties]="{'elementId': 'element123456', 'elementCategory': 'some elements'}"
->Click Me for cmCreateElementTag</div>
-
-<div 
-    angulartics2On="click" 
-    angularticsAction="cmCreateConversionEventTag" 
-    [angularticsProperties]="{'eventId': 'Request More Information', 'actionType': '2', 'eventCategoryId': 'Forms', 'points': '10'}"
->Click Me for cmCreateConversionEventTag</div>
-```