DOCSEARCHbyAlgolia
Submit Docs

angulartics2

repository·master·Indexed 21 days ago

https://github.com/angulartics/angulartics2

A vendor-agnostic web analytics library for Angular applications. It provides an abstraction layer that allows developers to write analytics code once and switch between various providers with minimal configuration. Supported providers include Google Analytics (analytics.js, Global Site Tag, Enhanced Ecommerce), Google Tag Manager, Adobe Analytics Cloud, Amplitude, Microsoft Application Insights, Baidu Analytics, Clicky, Facebook Pixel, and GoSquared.

Tokens
22.1K
Snippets
85
Records
94
Agent score
77%

What's inside angulartics2

  1. Track events and route changes in Launch, by Adobe

    master

    Once the provider is configured, tracking follows the standard Angulartics2 pattern. In Adobe Launch, you must configure rules to listen for the following 'Direct call' Event names:

    • Route Changes: Tracked using a 'Direct call' Event named pageTrack.
    • Custom Events/Activities: Tracked using a 'Direct call' Event named eventTrack.

    For detailed instructions on how to trigger these events from components or templates, refer to the Tracking Events documentation.

  3. Use Adobe Analytics Cloud with Angulartics2

    master

    You can integrate Adobe Analytics Cloud into your application using the Angulartics2AdobeAnalytics provider. This allows you to track events and analytics data through the Angulartics2 abstraction layer.

    To use this provider, import it from the main package:

    import { Angulartics2AdobeAnalytics } from 'angulartics2';

    import { Angulartics2AdobeAnalytics } from 'angulartics2';

  5. Setup Matomo for Angulartics2

    master

    To use Matomo with Angulartics2, you must first include the standard Matomo tracking script in your index.html head tag.

    Important: You must comment out or delete the _paq.push(['trackPageView']); line from the standard snippet. Angulartics2 handles page tracking automatically on route changes, and leaving this line active will result in duplicate page views.

    Replace YOUR-DOMAIN in the script with your actual Matomo domain (e.g., //DOMAIN.innocraft.cloud for Innocraft cloud service).

    <!-- Matomo -->
<script type="text/javascript">
  var _paq = _paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  // _paq.push(['trackPageView']); // DELETE THIS LINE
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo.YOUR-DOMAIN.com/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '11']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

  6. Use angulartics2 without a router

    master

    If you are not using @angular/router, you can use Angulartics2RouterlessModule. Note that @angular/router must still be installed in your project dependencies, even if it is not used by the application.

    import { Angulartics2RouterlessModule } from 'angulartics2';

@NgModule({
  imports: [
    Angulartics2RouterlessModule.forRoot(),
  ],
})
export class AppModule {}

  9. Handle offline tracking and conversion responses

    master

    Incendium supports offline tracking by allowing you to record a conversion key. When a conversion is fired with a key in its properties, you can subscribe to angulartics2Incendium.incendiumResponse to receive the response once the conversion has been tracked. This is useful for workflows where you need to associate revenue with an original conversion later (e.g., a contact form lead that converts via phone).

    Important: Always unsubscribe from incendiumResponse in your ngOnDestroy lifecycle hook to prevent memory leaks.

    export class Example implements OnInit, OnDestroy {
  private incSubscription;

  constructor(
    private angulartics2: Angulartics2,
    private angulartics2Incendium: Angulartics2Incendium,
  ) {}

  ngOnInit(): void {
    // Subscribe to the response to get the conversion key back
    this.incSubscription = this.angulartics2Incendium.incendiumResponse.subscribe({
      next: v => {
        if (v.type === IncendiumEventNames.ADD_CONVERION) {
          this.submit(v.value);
        }
      },
      error: e => {
        console.error(e);
        this.submit();
      },
    });
  }

  ngOnDestroy(): void {
    // Always unsubscribe
    this.incSubscription.unsubscribe();
  }

  onSubmit() {
    this.angulartics2.eventTrack.next({
      action: IncendiumEventNames.ADD_CONVERION,
      properties: {
        key: 'my_trigger_as_assigned_in_incendium',
      },
    });
  }

  submit(incendiumKey?: string) {
    alert(`form submitted with ${incendiumKey ? `key ${incendiumKey}` : `no key`}`);
  }
}

  10. Setup IBM Digital Analytics

    master

    Before using the Angulartics2 provider, you must include the IBM Digital Analytics script in your index.html file. Place the following code before the closing </body> tag. Ensure you replace XXXXXXXXX with your actual Client ID and configure the cmSetClientID parameters (such as the data domain and company name) as required by your IBM setup.

    <script type="text/javascript" src="//libs.coremetrics.com/eluminate.js"></script>
<script type="text/javascript">
    cmSetClientID("XXXXXXXXX", true, "data.coremetrics.com", "ibm.com");
</script>

  11. Initial Setup for Launch, by Adobe

    master

    Before using the Angulartics2 provider, you must include the Adobe Launch embed code in your application.

    1. Add the Launch embed code to the end of your <head> tag.
    2. You can use the async version of the embed code, or use the non-async version in the <head> combined with the _satellite.pageBottom() snippet at the end of the <body>.

    Note: This provider is also compatible with Adobe Dynamic Tag Management (DTM).

  12. Configure the Angulartics2 Matomo Provider

    master

    Register the Matomo provider in your application's root module (app.module.ts) by importing Angulartics2Matomo and including Angulartics2Module.forRoot() in your imports array.

    import { Angulartics2Module } from 'angulartics2';
import { Angulartics2Matomo } from 'angulartics2';

@NgModule({
  imports: [
    Angulartics2Module.forRoot(),
    // ...
  ]
})