generator-ngx-rocket/generators/app/templates/docs/_analytics.md

Extensible Angular 13+ enterprise-grade project generator based on angular-cli with best practices from the community. Includes PWA/Cordova/Electron support, coding guides and more!

# Analytics
<% if (!props.angulartics) { -%>

This project does not come with any analytics library.
Should you decide to use one, you may want to consider [Angulartics2](https://github.com/angulartics/angulartics2).

<% } else { -%>

Analytics in this app are managed through the [Angulartics2](https://github.com/angulartics/angulartics2) library.

It is already pre-configured to track page views, and provides examples to track events from both TypeScript code and HTML elements.
Here is a quick usage documentation, you can read further information on the official website.

## Registering your provider
<% if (props.analyticsProvider === 'ga') { -%>

Google Analytics is already registered as the project's analytics provider.
Should you need to change the account identifier, you can do so in the call to `ga(...)` performed in the body of `index.html`.

<% } else { -%>

Currently, only Google Analytics is fully installed from the starter kit.
Do not worry, this only means you will need to select and import your provider yourself.
Simply follow the instructions detailed in the [official documentation](https://github.com/angulartics/angulartics2#supported-providers).

<% } -%>
## Tracking events

### Declarative event tracking

The simplest way to do event tracking is by adding the attributes `angulartics2On`, `angularticsCategory` and `angularticsAction` to an HTML element.
The homepage generated by the starter kit contains one such button.
For reference, here is a UI-framework-agnostic example.

```html
<button
  angulartics2On="click"
  angularticsAction="Button clicked"
  angularticsCategory="UI">
  Click me to send the current quote as an Analytics event
</button>
```

### Using the API
<% if (props.analyticsProvider === 'ga') { -%>

As an example, the application already comes configured to track its startup through an event.
You may use the example as reference: it can be found in the first lines of `ngOnInit()` in `app.component.ts`.

<% } -%>
To access the API, inject your provider :

```typescript
constructor(...
            private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
            ...)
```

You may then use the `eventTrack` function:

```typescript
this.angulartics2GoogleAnalytics.eventTrack('Something happened', {category: 'My category'});
this.angulartics2GoogleAnalytics.eventTrack('Something else happened', {category: 'My other category', label: 'My custom label'});
```
<% } -%>