diff --git a/sharedComponents/SEO/SEO.service.ts b/sharedComponents/SEO/SEO.service.ts
index 8543d17f..2267be0f 100644
--- a/sharedComponents/SEO/SEO.service.ts
+++ b/sharedComponents/SEO/SEO.service.ts
@@ -2,7 +2,9 @@ import { Injectable, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import {  Optional, RendererFactory2, ViewEncapsulation } from '@angular/core';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class SEOService {
    constructor( @Inject(DOCUMENT) private doc,
    private rendererFactory: RendererFactory2,
diff --git a/sharedComponents/base/base.component.ts b/sharedComponents/base/base.component.ts
new file mode 100644
index 00000000..d1e5e18a
--- /dev/null
+++ b/sharedComponents/base/base.component.ts
@@ -0,0 +1,50 @@
+import {Directive, OnDestroy} from "@angular/core";
+import {Subscriber} from "rxjs";
+import {EnvProperties} from "../../utils/properties/env-properties";
+import {properties} from "src/environments/environment";
+import {PiwikService} from "../../utils/piwik/piwik.service";
+import {Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "../SEO/SEO.service";
+import {Router} from "@angular/router";
+
+@Directive()
+export abstract class BaseComponent implements OnDestroy {
+  public properties: EnvProperties = properties;
+  protected subscriptions: any[] = [];
+  /** Metadata */
+  public title: string;
+  public description: string;
+  protected _piwikService: PiwikService;
+  protected _meta: Meta;
+  protected seoService: SEOService;
+  protected _title: Title;
+  protected _router: Router;
+
+  protected constructor() {
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      if(subscription instanceof Subscriber) {
+        subscription.unsubscribe()
+      } else if(subscription instanceof Function) {
+        subscription();
+      } else if(typeof IntersectionObserver !== 'undefined' && subscription instanceof IntersectionObserver) {
+        subscription.disconnect();
+      } else if(typeof ResizeObserver !== 'undefined' && subscription instanceof ResizeObserver) {
+        subscription.disconnect();
+      }
+    });
+  }
+
+  public setMetadata() {
+    const url = properties.domain + properties.baseLink + this._router.url;
+    this.seoService.createLinkForCanonicalURL(url, false);
+    this._meta.updateTag({content: url}, "property='og:url'");
+    this._meta.updateTag({content: this.description}, "name='description'");
+    this._meta.updateTag({content: this.description}, "property='og:description'");
+    this._meta.updateTag({content: this.title}, "property='og:title'");
+    this._title.setTitle(this.title);
+    this.subscriptions.push(this._piwikService.trackView(properties, this.title).subscribe());
+  }
+}
diff --git a/utils/piwik/piwik.service.ts b/utils/piwik/piwik.service.ts
index 81c9c2f5..0f86b953 100644
--- a/utils/piwik/piwik.service.ts
+++ b/utils/piwik/piwik.service.ts
@@ -8,7 +8,9 @@ import {ConfigurationService} from "../configuration/configuration.service";
 import {switchMap, take} from "rxjs/operators";
 
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class PiwikService {
   constructor(private http: HttpClient, private configurationService: ConfigurationService) {
   }