Logging von Sharing und Installing

orga/test.sql

@@ -76,7 +76,7 @@ INSERT INTO `Level` (`id`, `words`, `positions`, `renderer`, `lastUpdated`, `lan
 (15, '["ARCHIV","CHARME"]', '[1,1,3]', 20, '2018-07-14 17:01:18', 1, 0, 2),
 (26, '["BODENSEE","ALARMRUF"]', '[3,2,0,3]', 40, '2018-07-14 17:01:18', 1, 0, 40),
 (217, '["ZEITSTRAFE","HOCHSAISON"]', '[1,0,3,3,1]', 60, '2018-07-14 17:01:18', 1, 0, 60),
-(220, '["FEINGUSS","R\\u00dcCKFALL","PHYSIKER","RESIDENZ","BERATUNG","HERZLAND"]', '[2,0,0,1,2,2,3,3,2,1,1,2,0,0]', 100, '2018-07-14 17:01:18', 1, 0, 100),
+(220, '["FEINGUSS","R\\u00dcCKFALL","PHYSIKER","RESIDENZ","BERATUNG","KOCHTOPF"]', '[2,0,0,1,2,2,3,3,2,1,1,2,0,0]', 100, '2018-07-14 17:01:18', 1, 0, 100),
 (24, '["BETONUNG","ANBETUNG","ALLERGIE","BAUMHAUS"]', '[0,3,1,1,3,1,2,0,0,0]', 120, '2018-07-14 17:01:18', 1, 0, 120),
 (62, '["FEHLPROGNOSE","GEISTESKRAFT","ARBEITSPAUSE","BEREITSCHAFT","MOSAIKARBEIT","INFRAROTFILM"]', '[0,3,0,1,0,3,2,3,1,2,3,1,2,2,0,2,3,0,2,1,1]', 140, '2018-07-14 17:01:18', 1, 0, 140),
 (260, '["SCHREIBTISCH","URHEBERRECHT","PFLANZENKOST","OPERNKONZERT"]', '[1,3,2,1,3,0,1,2,3,0,2,0,1,0,0]', 160, '2018-07-14 17:01:18', 1, 0, 160),

public/js/app.js

@@ -2936,7 +2936,7 @@ class ShareButton {
         this._deviceType = deviceType;
         this._icon = icon;
         this._callback = callback;
-        console.log("shouldLoad", Helper.nonNull(shouldLoadImg, false), shouldLoadImg);
+
         if (Helper.nonNull(shouldLoadImg, false)){
             this._icon = ViewInflater.inflate(this._icon);
         }
@@ -2963,6 +2963,34 @@ ShareButton.TYPE_MOBILE_LEFTOVER = 4;
 ShareButton.TYPE_MOBILE = ShareButton.TYPE_MOBILE_APPLE+ShareButton.TYPE_MOBILE_LEFTOVER;
 ShareButton.TYPE_ALL = ShareButton.TYPE_DESKTOP+ShareButton.TYPE_MOBILE;
 
+class MultipleShareButton extends ShareButton{
+    constructor(deviceType, icon, callbacks, shouldLoadImg)
+    {
+        console.log(Array.isArray(deviceType),  deviceType[0] instanceof ShareButton);
+        if (Array.isArray(deviceType) && deviceType[0] instanceof ShareButton){
+            let btn = deviceType[0];
+            deviceType = btn._deviceType;
+            icon = btn._icon;
+            callbacks = deviceType;
+            shouldLoadImg = Helper.nonNull(shouldLoadImg, icon);
+        }
+
+        super(deviceType, icon, function (link, element, event) {
+            if (!Array.isArray(callbacks)){
+                callbacks = [callbacks];
+            }
+            for (let i = 0; i < callbacks.length; i++) {
+                if (callbacks[i] instanceof ShareButton){
+                    callbacks[i].getCallback()(link, element, event);
+                }
+                else {
+                    callbacks[i](link, element, event);
+                }
+            }
+        }, shouldLoadImg);
+    }
+}
+
 class ShareManager {
     static init() {
         ShareManager.shareButtons = [];
@@ -4677,16 +4705,13 @@ class Matomo {
             g.src = Matomo.TRACK_SITE + '/piwik.js';
             s.appendChild(g);
         });
-        // window.addEventListener('hashchange', () => {
-        //     Matomo.update()
-        // });
     }
 
     static update(title) {
-        if (Helper.nonNull(Matomo.currentUrl)){
+        if (Helper.nonNull(Matomo.currentUrl)) {
             Matomo.push(['setReferrerUrl', Matomo.currentUrl]);
         }
-        Matomo.currentUrl =  window.location.pathname+window.location.search;
+        Matomo.currentUrl = window.location.pathname + window.location.search;
         Matomo.push(['setCustomUrl', Matomo.currentUrl]);
         Matomo.push(['setDocumentTitle', title]);
 
@@ -4712,17 +4737,10 @@ class Matomo {
                 resolve(!this["isUserOptedOut"]());
             }]);
         });
-        // Matomo.isTrackingPromise = Matomo.query("isTracked")
-        //     .then(xml => {
-        //         let textContent = xml.firstChild.textContent;
-        //         // localStorage.setItem(Matomo.LOCAL_STORAGE_KEY, textContent);
-        //         return (textContent === "1")
-        //     });
         return Matomo.isTrackingPromise;
     }
 
-    static
+    static async query(method) {
-    async query(method) {
         return fetch(Matomo.TRACK_SITE + Matomo.BASE_PATH + method, {
             "mode": "cors",
             "credentials": "include",
@@ -4733,11 +4751,10 @@ class Matomo {
         return Matomo.isTrackingPromise;
     }
 
-    static
+    static async setTrack(shouldTrack) {
-    async setTrack(shouldTrack) {
         Matomo.isTrackingPromise = Promise.resolve(shouldTrack);
         localStorage.setItem(Matomo.LOCAL_STORAGE_KEY, (shouldTrack === true) ? "1" : "0");
-        // return await Matomo.query((shouldTrack) ? "doTrack" : "doIgnore");
+
         if (shouldTrack) {
             Matomo.push(["forgetUserOptOut"], true);
         }
@@ -4746,16 +4763,24 @@ class Matomo {
         }
     }
 
-    static
+    static async trackEvent(event, name, label, value){
-    async push(arr, force) {
+        let ev = ["trackEvent", event, name];
-        // force = Helper.nonNull(force, false);
+        if (Helper.isNotNull(label)){
+            ev.push(label);
+        }
+        if (Helper.isNotNull(value) && !isNaN(parseFloat(value)) && isFinite(value)){
+            ev.push(value);
+        }
+
+        return this.push(ev);
+    }
+
+    static async push(arr, force) {
 
         if (!Array.isArray(arr)) {
             arr = [arr];
         }
-        // if (force || await Matomo.getTrackingPromise()) {
         window["_paq"].push(arr);
-        // }
     }
 }
 
@@ -4771,6 +4796,15 @@ InitPromise.addPromise(() => {
     Matomo.init();
 });
 
+class MatomoShareButton extends MultipleShareButton{
+
+    constructor(baseButton, platform, shouldLoadImg) {
+        super([baseButton, (url) => {
+            Matomo.trackEvent("shared", url, platform);
+        }], shouldLoadImg);
+    }
+}
+
 class ScaleHelper {
     async scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, addListener) {
 
@@ -6848,6 +6882,9 @@ class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
                 installButton.classList.add("hidden");
                 InstallManager.prompt().then((e) => {
                     console.log("clicked", e);
+                    if (e["outcome"] === "accepted"){
+                        Matomo.trackEvent("installed", "installed");
+                    }
                 });
             });
             installButton.classList.remove("hidden");
@@ -6887,9 +6924,9 @@ ThemeManager.addTheme(new Theme("green", "green"));
 ThemeManager.addTheme(new Theme("pink", "pink"));
 ThemeManager.addTheme(new Theme("dark", "dark"));
 
-ShareManager.addShareButton(new WhatsappShareButton('img/whatsapp.svg', true));
+ShareManager.addShareButton(new MatomoShareButton(new WhatsappShareButton('img/whatsapp.svg'), "whatsapp", true));
-ShareManager.addShareButton(new SmsShareButton('img/sms.svg', true));
+ShareManager.addShareButton(new MatomoShareButton(new SmsShareButton('img/sms.svg'), "sms", true));
-ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg', true));
+ShareManager.addShareButton(new MatomoShareButton(new TelegramShareButton('img/telegram.svg'), "telegram", true));
 // ShareManager.addShareButton(new CopyShareButton('img/copy.svg'));
 
 let app = new App();

src/js/init.js

@@ -18,7 +18,7 @@ import "./lib/pwa-user-management"
 
 import {SettingsManager, SettingsSite} from "./lib/pwa-core";
 
-import {InstallManager, Matomo, SoundManager} from "./lib/pwa-assets";
+import {InstallManager, Matomo, MatomoShareButton, SoundManager} from "./lib/pwa-assets";
 import {MenuSite} from "../module/Application/pwa/js/site/MenuSite";
 import {WordRotatorSettingFragment} from "../module/Application/pwa/js/Fragment/WordRotatorSettingFragment";
 
@@ -37,9 +37,9 @@ ThemeManager.addTheme(new Theme("green", "green"));
 ThemeManager.addTheme(new Theme("pink", "pink"));
 ThemeManager.addTheme(new Theme("dark", "dark"));
 
-ShareManager.addShareButton(new WhatsappShareButton('img/whatsapp.svg', true));
+ShareManager.addShareButton(new MatomoShareButton(new WhatsappShareButton('img/whatsapp.svg'), "whatsapp", true));
-ShareManager.addShareButton(new SmsShareButton('img/sms.svg', true));
+ShareManager.addShareButton(new MatomoShareButton(new SmsShareButton('img/sms.svg'), "sms", true));
-ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg', true));
+ShareManager.addShareButton(new MatomoShareButton(new TelegramShareButton('img/telegram.svg'), "telegram", true));
 // ShareManager.addShareButton(new CopyShareButton('img/copy.svg'));
 
 let app = new App();

src/js/lib/pwa-assets.js

@@ -1,4 +1,4 @@
-import { Helper, InitPromise, Fragment, Translator } from './pwa-lib.js';
+import { Helper, InitPromise, MultipleShareButton, Fragment, Translator } from './pwa-lib.js';
 
 class DelayPromise extends Promise {
     static async delay(delay) {
@@ -74,16 +74,13 @@ class Matomo {
             g.src = Matomo.TRACK_SITE + '/piwik.js';
             s.appendChild(g);
         });
-        // window.addEventListener('hashchange', () => {
-        //     Matomo.update()
-        // });
     }
 
     static update(title) {
-        if (Helper.nonNull(Matomo.currentUrl)){
+        if (Helper.nonNull(Matomo.currentUrl)) {
             Matomo.push(['setReferrerUrl', Matomo.currentUrl]);
         }
-        Matomo.currentUrl =  window.location.pathname+window.location.search;
+        Matomo.currentUrl = window.location.pathname + window.location.search;
         Matomo.push(['setCustomUrl', Matomo.currentUrl]);
         Matomo.push(['setDocumentTitle', title]);
 
@@ -109,17 +106,10 @@ class Matomo {
                 resolve(!this["isUserOptedOut"]());
             }]);
         });
-        // Matomo.isTrackingPromise = Matomo.query("isTracked")
-        //     .then(xml => {
-        //         let textContent = xml.firstChild.textContent;
-        //         // localStorage.setItem(Matomo.LOCAL_STORAGE_KEY, textContent);
-        //         return (textContent === "1")
-        //     });
         return Matomo.isTrackingPromise;
     }
 
-    static
+    static async query(method) {
-    async query(method) {
         return fetch(Matomo.TRACK_SITE + Matomo.BASE_PATH + method, {
             "mode": "cors",
             "credentials": "include",
@@ -130,11 +120,10 @@ class Matomo {
         return Matomo.isTrackingPromise;
     }
 
-    static
+    static async setTrack(shouldTrack) {
-    async setTrack(shouldTrack) {
         Matomo.isTrackingPromise = Promise.resolve(shouldTrack);
         localStorage.setItem(Matomo.LOCAL_STORAGE_KEY, (shouldTrack === true) ? "1" : "0");
-        // return await Matomo.query((shouldTrack) ? "doTrack" : "doIgnore");
+
         if (shouldTrack) {
             Matomo.push(["forgetUserOptOut"], true);
         }
@@ -143,16 +132,24 @@ class Matomo {
         }
     }
 
-    static
+    static async trackEvent(event, name, label, value){
-    async push(arr, force) {
+        let ev = ["trackEvent", event, name];
-        // force = Helper.nonNull(force, false);
+        if (Helper.isNotNull(label)){
+            ev.push(label);
+        }
+        if (Helper.isNotNull(value) && !isNaN(parseFloat(value)) && isFinite(value)){
+            ev.push(value);
+        }
+
+        return this.push(ev);
+    }
+
+    static async push(arr, force) {
 
         if (!Array.isArray(arr)) {
             arr = [arr];
         }
-        // if (force || await Matomo.getTrackingPromise()) {
         window["_paq"].push(arr);
-        // }
     }
 }
 
@@ -168,6 +165,15 @@ InitPromise.addPromise(() => {
     Matomo.init();
 });
 
+class MatomoShareButton extends MultipleShareButton{
+
+    constructor(baseButton, platform, shouldLoadImg) {
+        super([baseButton, (url) => {
+            Matomo.trackEvent("shared", url, platform);
+        }], shouldLoadImg);
+    }
+}
+
 class RotateHelper {
     rotate(element, degrees){
         let rotateText = element.innerText;
@@ -527,4 +533,4 @@ class TabbedFragment extends Fragment {
     }
 }
 
-export { DelayPromise, InstallManager, Matomo, RotateHelper, ScaleHelper, AudioChain, SoundManager, TabbedFragment };
+export { DelayPromise, InstallManager, Matomo, MatomoShareButton, RotateHelper, ScaleHelper, AudioChain, SoundManager, TabbedFragment };

src/js/lib/pwa-lib.js

@@ -3665,7 +3665,7 @@ class ShareButton {
         this._deviceType = deviceType;
         this._icon = icon;
         this._callback = callback;
-        console.log("shouldLoad", Helper.nonNull(shouldLoadImg, false), shouldLoadImg);
+
         if (Helper.nonNull(shouldLoadImg, false)){
             this._icon = ViewInflater.inflate(this._icon);
         }
@@ -3723,6 +3723,34 @@ class CopyShareButton extends ShareButton
     }
 }
 
+class MultipleShareButton extends ShareButton{
+    constructor(deviceType, icon, callbacks, shouldLoadImg)
+    {
+        console.log(Array.isArray(deviceType),  deviceType[0] instanceof ShareButton);
+        if (Array.isArray(deviceType) && deviceType[0] instanceof ShareButton){
+            let btn = deviceType[0];
+            deviceType = btn._deviceType;
+            icon = btn._icon;
+            callbacks = deviceType;
+            shouldLoadImg = Helper.nonNull(shouldLoadImg, icon);
+        }
+
+        super(deviceType, icon, function (link, element, event) {
+            if (!Array.isArray(callbacks)){
+                callbacks = [callbacks];
+            }
+            for (let i = 0; i < callbacks.length; i++) {
+                if (callbacks[i] instanceof ShareButton){
+                    callbacks[i].getCallback()(link, element, event);
+                }
+                else {
+                    callbacks[i](link, element, event);
+                }
+            }
+        }, shouldLoadImg);
+    }
+}
+
 class ShareManager {
     static init() {
         ShareManager.shareButtons = [];
@@ -4327,4 +4355,4 @@ function applyPolyfills() {
     });
 }
 
-export { App, ChainAble, CookieCompliance, ConfirmDialog, Dialog, FlashMessenger, AbstractService, AbstractGapiResponse, Achievement, AchievementList, GameService, GapiPlayer, Leaderboard, Score, GapiHandler, Helper, InitPromise, ActionBarMenu, Menu, MenuAction, OpenSubmenuAction, Submenu, MyDb, Prioritised, ScriptLoader, CopyShareButton, ShareButton, ShareManager, SmsShareButton, TelegramShareButton, WhatsappShareButton, SimpleWS, AbstractSite, Context, Fragment, PauseSite, SiteContainer, SiteManager, SystemSettings, Theme, ThemeManager, DBTranslator, Translator, TranslatorDB, ViewInflater, applyPolyfills };
+export { App, ChainAble, CookieCompliance, ConfirmDialog, Dialog, FlashMessenger, AbstractService, AbstractGapiResponse, Achievement, AchievementList, GameService, GapiPlayer, Leaderboard, Score, GapiHandler, Helper, InitPromise, ActionBarMenu, Menu, MenuAction, OpenSubmenuAction, Submenu, MyDb, Prioritised, ScriptLoader, CopyShareButton, MultipleShareButton, ShareButton, ShareManager, SmsShareButton, TelegramShareButton, WhatsappShareButton, SimpleWS, AbstractSite, Context, Fragment, PauseSite, SiteContainer, SiteManager, SystemSettings, Theme, ThemeManager, DBTranslator, Translator, TranslatorDB, ViewInflater, applyPolyfills };

src/module/Application/pwa/js/Fragment/WordRotatorSettingFragment.js

@@ -67,6 +67,9 @@ export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
                 installButton.classList.add("hidden");
                 InstallManager.prompt().then((e) => {
                     console.log("clicked", e);
+                    if (e["outcome"] === "accepted"){
+                        Matomo.trackEvent("installed", "installed")
+                    }
                 });
             });
             installButton.classList.remove("hidden");

src/module/Application/pwa/translations/de.json

@@ -12,7 +12,7 @@
 
   "tutorial-step-1": "Klicke auf ein Feld, um dieses rotieren zu lassen!",
   "tutorial-step-2": "Um zu gewinnen, drehe die Segmente so, dass du zwei Wörter lesen kannst.",
-  "tutorial-step-3": "Durch die Hilfe kannst du ein Segment lösen lassen. Die Hilfe kostet aber 25 Münzen. Probiere jetzt die Hilfe aus.",
+  "tutorial-step-3": "Die Hilfe löst ein Segment, kostet aber 25 Münzen. Probiere jetzt die Hilfe aus.",
   "tutorial-step-4": "Große Segmente drehst du, indem du diese ziehst.",
   "extra-coins-after-first-level":"Für das erste Level gibt es 50 extra Münzen!",