MAPG-178 add Google Analytics

style adaptations
cookie notice improvements

public/static/js/game.js

@@ -16,7 +16,7 @@
 
         initialize: function () {
             document.getElementById('loading').style.visibility = 'visible';
-            document.getElementById('guessCover').style.visibility = 'visible';
+            document.getElementById('panoCover').style.visibility = 'visible';
             document.getElementById('currentRound').innerHTML = '1/' + String(Game.NUMBER_OF_ROUNDS);
             document.getElementById('currentScoreSum').innerHTML = '0/0';
 
@@ -27,7 +27,7 @@
 
             MapGuesser.httpRequest('GET', '/game/' + mapId + '/newPlace.json', function () {
                 document.getElementById('loading').style.visibility = 'hidden';
-                document.getElementById('guessCover').style.visibility = 'hidden';
+                document.getElementById('panoCover').style.visibility = 'hidden';
 
                 if (this.response.error) {
                     //TODO: handle this error
@@ -98,7 +98,7 @@
                 lastRound.line.setVisible(false);
             }
 
-            document.getElementById('guessCover').style.visibility = 'hidden';
+            document.getElementById('panoCover').style.visibility = 'hidden';
             document.getElementById('showGuessButton').style.visibility = null;
             document.getElementById('guess').style.visibility = null;
             document.getElementById('guess').classList.remove('result')
@@ -152,7 +152,7 @@
                 document.getElementById('guess').classList.remove('adapt');
             }
             document.getElementById('loading').style.visibility = 'visible';
-            document.getElementById('guessCover').style.visibility = 'visible';
+            document.getElementById('panoCover').style.visibility = 'visible';
 
             var data = new FormData();
             data.append('lat', String(guessPosition.lat));
@@ -370,6 +370,14 @@
         }
     };
 
+    MapGuesser.sessionAvailableHooks.reinitializeGame = function () {
+        MapGuesser.httpRequest('GET', '/game/' + mapId + '/json', function () {
+            mapBounds = this.response.bounds;
+
+            Game.initialize();
+        });
+    };
+
     if (!('ontouchstart' in document.documentElement)) {
         Game.adaptGuess = true;
     }

public/static/js/mapguesser.js

@@ -1,4 +1,49 @@
 var MapGuesser = {
+    cookiesAgreed: false,
+    sessionAvailableHooks: {},
+
+    initGoogleAnalitics: function () {
+        if (typeof GOOGLE_ANALITICS_ID === 'undefined') {
+            return;
+        }
+
+        // Global site tag (gtag.js) - Google Analytics
+        var script = document.createElement('script');
+        script.src = 'https://www.googletagmanager.com/gtag/js?id=' + GOOGLE_ANALITICS_ID;
+        script.async = true;
+
+        document.head.appendChild(script);
+
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', GOOGLE_ANALITICS_ID);
+    },
+
+    agreeCookies: function () {
+        if (MapGuesser.cookiesAgreed) {
+            return;
+        }
+
+        var expirationDate = new Date(new Date().getTime() + 20 * 365 * 24 * 60 * 60 * 1000).toUTCString();
+        document.cookie = 'COOKIES_CONSENT=1; expires=' + expirationDate + '; path=/';
+
+        MapGuesser.initGoogleAnalitics();
+        MapGuesser.httpRequest('GET', '/startSession.json', function () {
+            ANTI_CSRF_TOKEN = this.response.antiCsrfToken;
+
+            for (var hookId in MapGuesser.sessionAvailableHooks) {
+                if (!MapGuesser.sessionAvailableHooks.hasOwnProperty(hookId)) {
+                    continue;
+                }
+
+                MapGuesser.sessionAvailableHooks[hookId]();
+            }
+        });
+
+        MapGuesser.cookiesAgreed = true;
+    },
+
     httpRequest: function (method, url, callback, data) {
         var xhr = new XMLHttpRequest();
 

views/admin/map_editor.php

@@ -59,18 +59,20 @@ $jsFiles = [
         </div>
     </form>
 </div>
-<div id="map"></div>
-<div id="control">
-    <button id="saveButton" class="fullWidth" disabled>Save</button>
-</div>
-<div id="panorama"></div>
-<div id="noPano">
-    <p class="bold">No panorama is available for this location.</p>
-</div>
-<div id="placeControl">
-    <button id="applyButton" class="fullWidth">Apply</button>
-    <button id="closeButton" class="gray fullWidth marginTop">Close</button>
-    <button id="deleteButton" class="red fullWidth marginTop">Delete</button>
+<div class="full">
+    <div id="map"></div>
+    <div id="panorama"></div>
+    <div id="noPano">
+        <p class="bold">No panorama is available for this location.</p>
+    </div>
+    <div id="control">
+        <button id="saveButton" class="fullWidth" disabled>Save</button>
+    </div>
+    <div id="placeControl">
+        <button id="applyButton" class="fullWidth">Apply</button>
+        <button id="closeButton" class="gray fullWidth marginTop">Close</button>
+        <button id="deleteButton" class="red fullWidth marginTop">Delete</button>
+    </div>
 </div>
 <script>
     var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>';

views/game.php

@@ -21,38 +21,40 @@ $jsFiles = [
         --><span>Score <span id="currentScoreSum" class="bold"></span></span>
     </p>
 </header>
-<div id="guessCover"></div>
-<div id="panorama"></div>
-<div id="showGuessButtonContainer">
-    <button id="showGuessButton" class="fullWidth">Show guess map</button>
-</div>
-<div id="guess">
-    <div id="closeGuessButtonContainer" class="buttonContainer marginBottom">
-        <button id="closeGuessButton" class="fullWidth gray">Close</button>
+<div class="full">
+    <div id="panoCover"></div>
+    <div id="panorama"></div>
+    <div id="showGuessButtonContainer">
+        <button id="showGuessButton" class="fullWidth">Show guess map</button>
     </div>
-    <div id="map"></div>
-    <div id="guessButtonContainer" class="buttonContainer marginTop">
-        <button id="guessButton" class="fullWidth" disabled>Guess</button>
-    </div>
-    <div id="resultInfo">
-        <div id="distanceInfo">
-            <p>You were <span id="distance" class="bold"></span> close.</p>
-            <p class="bold">Game finished.</p>
+    <div id="guess">
+        <div id="closeGuessButtonContainer" class="buttonContainer marginBottom">
+            <button id="closeGuessButton" class="fullWidth gray">Close</button>
         </div>
-        <div id="scoreInfo">
-            <p>You earned <span id="score" class="bold"></span> points.</p>
-            <p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
+        <div id="map"></div>
+        <div id="guessButtonContainer" class="buttonContainer marginTop">
+            <button id="guessButton" class="fullWidth" disabled>Guess</button>
         </div>
-        <div>
-            <div id="scoreBarBase">
-                <div id="scoreBar"></div>
+        <div id="resultInfo">
+            <div id="distanceInfo">
+                <p>You were <span id="distance" class="bold"></span> close.</p>
+                <p class="bold">Game finished.</p>
+            </div>
+            <div id="scoreInfo">
+                <p>You earned <span id="score" class="bold"></span> points.</p>
+                <p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
+            </div>
+            <div>
+                <div id="scoreBarBase">
+                    <div id="scoreBar"></div>
+                </div>
             </div>
         </div>
-    </div>
-    <div id="continueButtonContainer" class="buttonContainer marginTop">
-        <button id="continueButton" class="fullWidth">Continue</button>
-        <button id="showSummaryButton" class="fullWidth">Show summary</button>
-        <button id="startNewGameButton" class="fullWidth">Play this map again</button>
+        <div id="continueButtonContainer" class="buttonContainer marginTop">
+            <button id="continueButton" class="fullWidth">Continue</button>
+            <button id="showSummaryButton" class="fullWidth">Show summary</button>
+            <button id="startNewGameButton" class="fullWidth">Play this map again</button>
+        </div>
     </div>
 </div>
 <script>

views/templates/main_footer.php

@@ -1,7 +1,10 @@
     <script>
         const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
         const REVISION = '<?= REVISION ?>';
-        const ANTI_CSRF_TOKEN = '<?= $_SESSION['anti_csrf_token'] ?>';
+        var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
+        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
+            const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
+        <?php endif; ?>
     </script>
     <script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
     <?php if (isset($jsFiles)) : ?>
@@ -17,22 +20,14 @@
     <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
         <script>
             (function () {
-                var MapGuesser = {
-                    cookiesAgreed: false,
-
-                    agreeCookies: function () {
-                        if (MapGuesser.cookiesAgreed) {
-                            return;
-                        }
-
-                        var expirationDate = new Date(new Date().getTime() + 20 * 365 * 24 * 60 * 60 * 1000).toUTCString();
-                        document.cookie = 'COOKIES_CONSENT=1; expires=' + expirationDate + '; path=/';
-
-                        MapGuesser.cookiesAgreed = true;
-                    }
+                // we don't want user to agree cookies when clicking on the notice itself
+                document.getElementById('cookiesNotice').onclick = function (e) {
+                    e.stopPropagation();
                 };
 
-                document.getElementById('agreeCookies').onclick = function () {
+                document.getElementById('agreeCookiesButton').onclick = function () {
+                    MapGuesser.agreeCookies();
+
                     document.getElementById('cookiesNotice').style.display = 'none';
                 };
 
@@ -41,6 +36,14 @@
                 };
             })();
         </script>
+    <?php else: ?>
+        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
+            <script>
+                (function () {
+                    MapGuesser.initGoogleAnalitics();
+                })();
+            </script>
+        <?php endif; ?>
     <?php endif; ?>
 </body>
 </html>

views/templates/main_header.php

@@ -27,7 +27,7 @@
             <p class="small">
                 <?= $_ENV['APP_NAME'] ?> uses cookies to improve user experience. By using the app or clicking 'Agree', you consent to our use of cookies.
             </p>
-            <button id="agreeCookies" class="small marginTop">Agree</button>
+            <button id="agreeCookiesButton" class="small marginTop">Agree</button>
         </div>
     <?php endif; ?>
     <div id="loading">