chore(demo): Provide code samples

Arnaud73 · Jul 2, 2023 · 5aa0bdd · 5aa0bdd
1 parent 7d5b1c5
commit 5aa0bdd
Show file tree

Hide file tree

Showing 13 changed files with 109 additions and 24 deletions.
diff --git a/projects/demo/src/app/consent/consent.component.html b/projects/demo/src/app/consent/consent.component.html
@@ -13,3 +13,20 @@ <h2>User consent for tracking</h2>
     </div>
   </footer>
 </article>
+
+<h2>Code</h2>
+
+<details>
+  <summary>Knowing if Matomo has its cookies enabled</summary>
+  <pre><code class="language-typescript">{{ hasCookiesCode }}</code></pre>
+</details>
+
+<details>
+  <summary>Giving tracking consent</summary>
+  <pre><code class="language-typescript">{{ giveConsentCode }}</code></pre>
+</details>
+
+<details>
+  <summary>Forgiving given tracking consent</summary>
+  <pre><code class="language-typescript">{{ removeConsentCode }}</code></pre>
+</details>
diff --git a/projects/demo/src/app/consent/consent.component.ts b/projects/demo/src/app/consent/consent.component.ts
@@ -7,6 +7,10 @@ import { MatomoTracker } from 'ngx-matomo';
   styleUrls: [],
 })
 export class ConsentComponent implements OnInit {
+  public readonly giveConsentCode = 'this.matomoTracker.setConsentGiven();';
+  public readonly removeConsentCode = 'this.matomoTracker.forgetConsentGiven();';
+  public readonly hasCookiesCode = 'this.matomoTracker.hasCookies().then(console.log);';
+
   /**
    * Creates an instance of ConsentComponent.
    *
@@ -15,9 +19,6 @@ export class ConsentComponent implements OnInit {
    */
   constructor(private readonly matomoTracker: MatomoTracker) {}
 
-  /**
-   * Angular OnInit lifecycle hook.
-   */
   ngOnInit(): void {
     this.matomoTracker
       .hasCookies()

diff --git a/projects/demo/src/app/e-commerce/article/article.component.html b/projects/demo/src/app/e-commerce/article/article.component.html
@@ -1,4 +1,4 @@
-<a role="button" routerLink="../.." class="outline">Back</a>
+<a role="button" routerLink="../.." class="outline">← Back</a>
 
 <article *ngIf="article$ | async as article">
   <h3>{{ article.name }}</h3>

diff --git a/projects/demo/src/app/e-commerce/article/article.component.ts b/projects/demo/src/app/e-commerce/article/article.component.ts
@@ -14,7 +14,7 @@ import { Article } from './article.model';
   styleUrls: [],
 })
 export class ArticleComponent {
-  article$: Observable<Article>;
+  public article$: Observable<Article>;
 
   constructor(
     private readonly route: ActivatedRoute,

diff --git a/projects/demo/src/app/e-commerce/order/order.component.html b/projects/demo/src/app/e-commerce/order/order.component.html
@@ -43,15 +43,18 @@ <h3>Your order</h3>
 <section>
   <h2>Catalog</h2>
 
-  <div class="grid" style="grid-template-columns: repeat(4, 1fr);">
+  <div class="grid" style="grid-template-columns: repeat(4, 1fr)">
     <article *ngFor="let article of catalog">
       <div routerLink="article/{{ article.id }}">
         <h3>{{ article.name }}</h3>
-        <img src="https://picsum.photos/id/{{ article.id }}/200/300" alt="{{ article.description }}" />
+        <img
+          src="https://picsum.photos/id/{{ article.id }}/200/300"
+          alt="{{ article.description }}"
+        />
         <p>{{ article.price | currency }}</p>
       </div>
       <footer>
-        <div class="grid" style="grid-template-columns: repeat(2, 1fr);">
+        <div class="grid" style="grid-template-columns: repeat(2, 1fr)">
           <button class="primary outline" (click)="addArticle(article.id)">+</button>
           <button class="secondary outline" (click)="removeArticle(article.id)">-</button>
         </div>

diff --git a/projects/demo/src/app/e-commerce/order/order.component.ts b/projects/demo/src/app/e-commerce/order/order.component.ts
@@ -22,9 +22,6 @@ export class OrderComponent implements OnInit {
     @Inject(CATALOG) readonly catalog: Array<Article>
   ) {}
 
-  /**
-   * Angular OnInit lifecycle hook.
-   */
   ngOnInit(): void {
     if (!this.order) {
       this.order = { id: '' + Math.floor(Math.random() * 10000), items: [] };

diff --git a/projects/demo/src/app/event/event.component.html b/projects/demo/src/app/event/event.component.html
@@ -29,3 +29,15 @@ <h1>Event handling</h1>
   <footer>
   </footer>
 </article>
+
+<h2>Code</h2>
+
+<details>
+  <summary>Code for tracking an event</summary>
+  <pre><code class="language-typescript">{{ eventTrackingCode }}</code></pre>
+</details>
+
+<details>
+  <summary>Directive for tracking a click</summary>
+  <pre><code class="language-html">{{ clickTrackingCode }}</code></pre>
+</details>
diff --git a/projects/demo/src/app/event/event.component.ts b/projects/demo/src/app/event/event.component.ts
@@ -8,6 +8,17 @@ import { MatomoTracker } from 'ngx-matomo';
   styleUrls: [],
 })
 export class EventComponent {
+  public readonly eventTrackingCode =
+    "this.matomoTracker.trackEvent('Category', 'Button pressed', 'tracking with code');";
+  public readonly clickTrackingCode =
+    '<button\n\
+  matomoClickCategory="Category"\n\
+  matomoClickAction="Button pressed"\n\
+  matomoClickName="Tracking with directive"\n\
+>\n\
+  Click Me!\n\
+</button>';
+
   /**
    * Creates an instance of EventComponent.
    *

diff --git a/projects/demo/src/app/form/form.component.ts b/projects/demo/src/app/form/form.component.ts
@@ -25,9 +25,6 @@ export class FormComponent implements AfterViewInit {
     private readonly matomoTracker: MatomoTracker
   ) {}
 
-  /**
-   * Angular AfterViewInit lifecycle hook.
-   */
   // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
   ngAfterViewInit(): void {
     // TODO To be implemented when Form Analytics will be supported.

diff --git a/projects/demo/src/app/user/user.component.html b/projects/demo/src/app/user/user.component.html
@@ -3,9 +3,7 @@ <h1>User Id management</h1>
 <section>
   <article>
     <h2>Visitor data</h2>
-    <p>
-      Information currently know by the Matomo tracker.
-    </p>
+    <p>Information currently known by the Matomo tracker.</p>
     <figure>
       <table role="grid">
         <caption>
@@ -36,15 +34,36 @@ <h2>Visitor data</h2>
   </article>
 
   <h2>User Id handling</h2>
+
   <form [formGroup]="userIdForm">
     <div class="grid">
       <input type="text" placeholder="User ID" formControlName="userId" required />
-      <button type="submit" class="primary" (click)="onUserIdSubmit()" [disabled]="!userIdForm.valid">
+      <button
+        type="submit"
+        class="primary"
+        (click)="onUserIdSubmit()"
+        [disabled]="!userIdForm.valid"
+      >
         Set User ID
       </button>
-      <button class="secondary" (click)="onUserIdReset()">
-        Reset User ID
-      </button>
+      <button type="button" class="secondary" (click)="onUserIdReset()">Reset User ID</button>
     </div>
   </form>
 </section>
+
+<h2>Code</h2>
+
+<details>
+  <summary>Getting the User Id</summary>
+  <pre><code class="language-typescript">{{ getUserIdCode }}</code></pre>
+</details>
+
+<details>
+  <summary>Setting the User Id</summary>
+  <pre><code class="language-typescript">{{ setUserIdCode }}</code></pre>
+</details>
+
+<details>
+  <summary>Resetting the User Id</summary>
+  <pre><code class="language-typescript">{{ resetUserIdCode }}</code></pre>
+</details>
diff --git a/projects/demo/src/app/user/user.component.ts b/projects/demo/src/app/user/user.component.ts
@@ -8,6 +8,11 @@ import { FormBuilder, Validators } from '@angular/forms';
   styleUrls: [],
 })
 export class UserComponent implements OnInit {
+  public readonly getUserIdCode =
+    'this.matomoTracker.getUserId().then(console.log);';
+  public readonly setUserIdCode = "this.matomoTracker.setUserId('MyUserId');";
+  public readonly resetUserIdCode = 'this.matomoTracker.resetUserId();';
+
   public userId = '';
   public visitorId = '';
   public visitorInfo: Array<string> = [];
@@ -27,9 +32,6 @@ export class UserComponent implements OnInit {
     private readonly formBuilder: FormBuilder
   ) {}
 
-  /**
-   * Angular OnInit lifecycle hook.
-   */
   ngOnInit(): void {
     this.matomoTracker.getUserId().then((uid) => {
       this.userId = uid;

diff --git a/projects/demo/src/app/welcome/welcome.component.html b/projects/demo/src/app/welcome/welcome.component.html
@@ -5,3 +5,12 @@ <h1>Welcome</h1>
   <a href="https://www.npmjs.com/package/ngx-matomo">ngx-matomo</a> features in an almost real
   application.
 </p>
+
+<h2>Code</h2>
+
+<details>
+  <summary>Matomo configuration code</summary>
+  <div>
+    <pre><code class="language-javascript">{{ configurationCode }}</code></pre>
+  </div>
+</details>
diff --git a/projects/demo/src/app/welcome/welcome.component.ts b/projects/demo/src/app/welcome/welcome.component.ts
@@ -8,6 +8,23 @@ import { MatomoTracker } from 'ngx-matomo';
   styleUrls: [],
 })
 export class WelcomeComponent {
+  public readonly configurationCode =
+    "matomoConfig = {\n\
+    scriptUrl: '//cdn.matomo.cloud/ngx.matomo.cloud/matomo.js',\n\
+    trackers: [\n\
+      {\n\
+        trackerUrl: 'https://ngx.matomo.cloud/matomo.php',\n\
+        siteId: 1,\n\
+      },\n\
+    ],\n\
+    skipTrackingInitialPageView: false,\n\
+    requireConsent: true,\n\
+    routeTracking: {\n\
+      enable: true,\n\
+    },\n\
+    trackLinks: true,\n\
+  }";
+
   /**
    * Creates an instance of WelcomeComponent.
    *