define custom element for matomo tracking

js/customElements/header.js

@@ -10,6 +10,7 @@ class Header extends HTMLElement {
                             <h1>${pageTitle}</h1 >
                         </div >
                     </div >
+                    <jl-matomo></jl-matomo>
                     <div class="header-separator header-separator-bottom " >
                         <svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1000 100" preserveAspectRatio = "none" >
                             <path class="svg-white-bg" d = "M737.9,94.7L0,0v100h1000V0L737.9,94.7z" ></path >
@@ -17,7 +18,7 @@ class Header extends HTMLElement {
                     </div >
                 </div >
                 <jl-main_menu id = "mainMenu"></jl-main_menu>
-            </header >
+            </header>
         `;
     }
 }

js/customElements/matomo.js

@@ -0,0 +1,16 @@
+class Matomo extends HTMLElement {
+    constructor() {
+        super();
+        this.generateTrackImg();
+    }
+    async generateTrackImg(){
+        let trackURL = await (await fetch("/API/config.php?name=trackURL")).text()
+        this.innerHTML = `
+        <!-- Matomo Image Tracker-->
+        <img referrerpolicy="no-referrer-when-downgrade" src="${trackURL}" style="border:0" alt="" />
+        <!-- End Matomo -->
+        `;
+    }
+}
+
+customElements.define("jl-matomo", Matomo);

js/script.js

@@ -15,4 +15,5 @@ require("./customElements/newComment");
 require("./customElements/contactMailButton");
 require("./customElements/header");
 require("./customElements/mainMenu");
-require("./customElements/footer");
+require("./customElements/footer");
+require("./customElements/matomo");

public/API/config.php

@@ -8,7 +8,7 @@ switch ($configValue){
         echo($sitekey);
         break;
     case "trackURL":
-        echo($trackurl);
+        echo($trackURL);
         break;
     default:
         echo("notFound");