https://github.com/codeconut-ltd/angular-snippet-collection
Collection of components, directives and services for Angular. Handles Google Analytics custom event tracking and user preferences like colour scheme choice.
https://github.com/codeconut-ltd/angular-snippet-collection
angular angular-component angular-directive angular-directives angular-service angular-snippets angular9 color-scheme component cookie-consent cookieconsent ecmascript6 event-tracking google-analytics javascript js osano snippets typescript user-tracking
Last synced: 2 months ago
JSON representation
Collection of components, directives and services for Angular. Handles Google Analytics custom event tracking and user preferences like colour scheme choice.
- Host: GitHub
- URL: https://github.com/codeconut-ltd/angular-snippet-collection
- Owner: Codeconut-Ltd
- License: mit
- Created: 2020-06-08T20:21:28.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-25T09:40:47.000Z (almost 2 years ago)
- Last Synced: 2025-04-12T06:58:13.861Z (2 months ago)
- Topics: angular, angular-component, angular-directive, angular-directives, angular-service, angular-snippets, angular9, color-scheme, component, cookie-consent, cookieconsent, ecmascript6, event-tracking, google-analytics, javascript, js, osano, snippets, typescript, user-tracking
- Language: TypeScript
- Homepage:
- Size: 63.5 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Angular Snippet Collection
- [About](#about)
- [Features](#features)
- [Todo](#todo)
---
## About
Collection of small helper components, directives and services that might be published in a more convenient format via NPM in the future.
*Tested with Angular 8-9*
### Setup
Manually copy and integrate these files in your own Angular setup.
Make sure to set the correct import paths for requirements.
Some classes need to be integrated in the main application module and component.
Watch out for 'todo' comments where custom data is required.
---
## Features
### Components
#### AbstractComponent
Use with view components. Applies `trackByFn` to improve list rendering performance.
##### Example
Component
```ts
import { AbstractComponent } from 'abstract.component';
@Component(...)
export class UiNavigationFooterComponent extends AbstractComponent {
...
```
View
```html
- {{item.id}}
```
---
### Directives
#### GoogleAnalytics / TrackEventDirective
Allow tracking custom events via Google Analytics.
##### Requirements
Services
- GoogleAnalyticsEventsService
##### Example
```html
Link
```
---
### Services
#### Cookie consent / CookieConsentService
Angular wrapper for the NPM plugin, including a little tweak (yep, dirty) to also respect the 'do not track signal' users might set. In this case, cookies will always be declined. A better way would be to change the cookie banner text as well.
*Todo:* Decouple dependency, optimize display.
##### Requirements
- global.d.ts
Services
- UserTrackPreferenceService
External
- [CookieConsent – Osano](https://www.npmjs.com/package/cookieconsent)
##### Example
---
#### Google Analytics / GoogleAnalyticsService
Enables Google Analytics and defines a custom datalayer variable.
Respects user opt-in from 'cookie consent'.
##### Requirements
- index.html
- global.d.ts
Services
- CookieConsentService
- GoogleAnalyticsEventsService
External
- [CookieConsent – Osano](https://www.npmjs.com/package/cookieconsent)
---
#### Google Analytics events / GoogleAnalyticsEventsService
Allows tracking custom and navigation change events.
Custom events can be tracked via `TrackEventDirective`.
##### Example
```ts
export class ExampleComponent {
constructor( private googleAnalyticsEventsService: GoogleAnalyticsEventsService ) {
}
track( event: any ) {
const eventData = ['UI module', 'Click', 'EVENT VALUE', 1];
this.googleAnalyticsEventsService.trackCustomEvent( eventData );
}
}
```
---
#### User colour scheme / UserColorSchemeService
Set user colour scheme preference as CSS class. It will be stored and loaded from cookie as well. The information is useful for theming websites and applying 'light switches'.
*Todo:* Move to LocalStorage instead, no need for cookies here.
---
#### User track preference / UserTrackPreferenceService
Retrieve 'do not track signal' from user settings. Used to disable tracking implementations in other services.
---
## Todo
- Integrate ESLint + TypeScript with Prettier