Merge pull request #4425 from mempool/mononaut/fix-matomo

fix matomo bug

frontend/src/app/components/about/about.component.html

@@ -36,14 +36,14 @@
     <div id="become-sponsor-container">
       <div class="become-sponsor community">
         <p style="font-weight: 700; font-size: 18px;">If you're an individual...</p>
-        <a href="https://mempool.space/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button">Become a Community Sponsor</a>
+        <a href="https://mempool.space/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button" (click)="onSponsorClick($event)">Become a Community Sponsor</a>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Exclusive swag</p>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Your avatar on the About page</p>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> And more coming soon :)</p>
       </div>
       <div class="become-sponsor enterprise">
         <p style="font-weight: 700; font-size: 18px;">If you're a business...</p>
-        <a href="https://mempool.space/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button">Become an Enterprise Sponsor</a>
+        <a href="https://mempool.space/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button" (click)="onEnterpriseClick($event)">Become an Enterprise Sponsor</a>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Increased API limits</p>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Co-branded instance</p>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> 99% service-level agreement</p>

frontend/src/app/components/about/about.component.ts

@@ -9,6 +9,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { map, share, tap } from 'rxjs/operators';
 import { ITranslators } from '../../interfaces/node-api.interface';
 import { DOCUMENT } from '@angular/common';
+import { EnterpriseService } from '../../services/enterprise.service';
 
 @Component({
   selector: 'app-about',
@@ -33,6 +34,7 @@ export class AboutComponent implements OnInit {
     private websocketService: WebsocketService,
     private seoService: SeoService,
     public stateService: StateService,
+    private enterpriseService: EnterpriseService,
     private apiService: ApiService,
     private router: Router,
     private route: ActivatedRoute,
@@ -108,4 +110,14 @@ export class AboutComponent implements OnInit {
   unmutePromoVideo(): void {
     this.promoVideo.nativeElement.muted = false;
   }
+
+  onSponsorClick(e): boolean {
+    this.enterpriseService.goal(5);
+    return true;
+  }
+
+  onEnterpriseClick(e): boolean {
+    this.enterpriseService.goal(6);
+    return true;
+  }
 }

frontend/src/app/services/enterprise.service.ts

@@ -3,6 +3,7 @@ import { Inject, Injectable } from '@angular/core';
 import { ApiService } from './api.service';
 import { SeoService } from './seo.service';
 import { StateService } from './state.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
@@ -11,12 +12,15 @@ export class EnterpriseService {
   exclusiveHostName = '.mempool.space';
   subdomain: string | null = null;
   info: object = {};
+  statsUrl: string;
+  siteId: number;
 
   constructor(
     @Inject(DOCUMENT) private document: Document,
     private apiService: ApiService,
     private seoService: SeoService,
     private stateService: StateService,
+    private activatedRoute: ActivatedRoute,
   ) {
     const subdomain = this.document.location.hostname.indexOf(this.exclusiveHostName) > -1
       && this.document.location.hostname.split(this.exclusiveHostName)[0] || false;
@@ -88,16 +92,63 @@ export class EnterpriseService {
       }
     }
 
+    this.statsUrl = statsUrl;
+    this.siteId = siteId;
+
     // @ts-ignore
-    const _paq = window._paq = window._paq || [];
+    if (window._paq && window['Matomo']) {
-    _paq.push(['disableCookies']);
+      window['Matomo'].addTracker(this.statsUrl+'m.php', this.siteId.toString());
-    _paq.push(['trackPageView']);
+      const matomo = this.getMatomo();
-    _paq.push(['enableLinkTracking']);
+      matomo.setDocumentTitle(this.seoService.getTitle());
-    (function() {
+      matomo.setCustomUrl(this.getCustomUrl());
-      _paq.push(['setTrackerUrl', statsUrl+'m.php']);
+      matomo.disableCookies();
-      _paq.push(['setSiteId', siteId.toString()]);
+      matomo.trackPageView();
-      const d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+      matomo.enableLinkTracking();
-      g.type='text/javascript'; g.async=true; g.src=statsUrl+'m.js'; s.parentNode.insertBefore(g,s);
+    } else {
-    })();
+      // @ts-ignore
+      const alreadyInitialized = !!window._paq;
+      // @ts-ignore
+      const _paq = window._paq = window._paq || [];
+      _paq.push(['setDocumentTitle', this.seoService.getTitle()]);
+      _paq.push(['setCustomUrl', this.getCustomUrl()]);
+      _paq.push(['disableCookies']);
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      if (alreadyInitialized) {
+        _paq.push(['addTracker', this.statsUrl+'m.php', this.siteId.toString()]);
+      } else {
+        (function() {
+          _paq.push(['setTrackerUrl', this.statsUrl+'m.php']);
+          _paq.push(['setSiteId', this.siteId.toString()]);
+          const d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+          // @ts-ignore
+          g.type='text/javascript'; g.async=true; g.src=statsUrl+'m.js'; s.parentNode.insertBefore(g,s);
+        })();
+      }
+    }
+  }
+
+  private getMatomo() {
+    if (this.siteId != null) {
+      return window['Matomo']?.getTracker(this.statsUrl, this.siteId);
+    }
+  }
+
+  goal(id: number) {
+    // @ts-ignore
+    this.getMatomo()?.trackGoal(id);
+  }
+
+  private getCustomUrl(): string {
+    let url = window.location.origin + '/';
+    let route = this.activatedRoute;
+    while (route) {
+      const segment = route?.routeConfig?.path;
+      if (segment && segment.length) {
+        url += segment + '/';
+      }
+      route = route.firstChild;
+    }
+    return url;
   }
 }