Merge pull request #835 from FitzwilliamMuseum/hotfix/analytics-fix

Cleaner analytics

Author: ChrisButterworth

app/Http/Controllers/landingPageController.php

@@ -13,15 +13,20 @@
 use App\Models\Exhibitions;
 
 use Illuminate\Contracts\View\View;
-use Illuminate\Http\Request;
 use Illuminate\Http\Response;
 use Illuminate\Support\Facades\Route;
 use App\Models\FloorPlans;
 
 class landingPageController extends Controller
 {
+    public static function injectPages(string $slug = ''): array
+    {
+        return LandingPageTemplate::getLanding($slug);
+    }
     /**
-     * @return View
+     * @param string $slug
+     * @return View|Response
+     * @throws InvalidArgumentException
      */
     public function index($slug = '')
     {

app/Models/LandingPageTemplate.php

@@ -13,6 +13,7 @@ class LandingPageTemplate extends Model
     protected static string $table = 'landing_page_template';
 
     /**
+     * @param string $section
      * @return array
      */
     public static function getLanding(string $slug = ''): array
@@ -24,6 +25,7 @@ public static function getLanding(string $slug = ''): array
                 'meta' => '*',
                 'filter[slug][eq]' => $slug,
                 'filter[page_template][eq]' => 'landing',
+                'filter[slug][eq]' => $slug
             )
         );
         return $api->getData();

public/css/app.css

@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=485572c52c3cb1a197870005c67f956b",
+    "/js/app.js": "/js/app.js?id=490bce15c2508c5b88061671cde8f380",
     "/js/image-gallery.js": "/js/image-gallery.js?id=d69a0e28c98ea4361c052ddbf98dd62d",
     "/js/events-carousel.js": "/js/events-carousel.js?id=89e31d3ded01942246c364c48d936947",
     "/css/app.css": "/css/app.css?id=880d35bb8b03cfe31ab3a81983fef778",

public/js/app.js

@@ -1122,7 +1122,6 @@ a.text-center.btn.btn-outline-light.btn__book {
     background: transparent;
 }
 
-
 .col-max-800 {
     max-width: 800px;
     margin: 56px auto;

public/mix-manifest.json

@@ -55,11 +55,12 @@ CookieConsent.run({
                         }, {
                             title: 'Analytics cookies',
                             description: 'These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.',
-                            toggle: {
-                                value: 'analytics',     // there are no default categories => you specify them
-                                enabled: true,
-                                readonly: false
-                            },
+                            // toggle: {
+                            //     value: 'analytics',     // there are no default categories => you specify them
+                            //     enabled: true,
+                            //     readonly: false
+                            // },
+                            linkedCategory: 'analytics',
                             cookieTable: {
                                 caption: 'Cookie table',
                                 headers: {
@@ -87,11 +88,12 @@ CookieConsent.run({
                         }, {
                             title: 'Marketing cookies',
                             description: "These cookies are used for advertising, including serving and rendering ads, personalizing ads (depending on your ad settings at <a href=\"https://g.co/adsettings\">g.co/adsettings</a>), limiting the number of times an ad is shown to a user, muting ads you have chosen to stop seeing, and measuring the effectiveness of ads.",
-                            toggle: {
-                                value: 'marketing',
-                                enabled: true,
-                                readonly: false
-                            },
+                            // toggle: {
+                            //     value: 'marketing',
+                            //     enabled: true,
+                            //     readonly: false
+                            // },
+                            linkedCategory: 'marketing',
                             cookieTable: {
                                 caption: 'Cookie table',
                                 headers: {
@@ -188,6 +190,42 @@ CookieConsent.run({
 
     onConsent: function (cookie) {
         gtag('consent', 'update', {'analytics_storage': 'granted', 'ad_storage': 'granted', 'ad_personalization': 'granted', 'ad_user_data': 'granted'});
+        // Find all soundcloud embeds on the page and block the src of their iframe if cookies aren't accepted
+        let soundcloudEmbeds = document.querySelectorAll('.soundcloud-embed-component'); 
+
+        if(soundcloudEmbeds && soundcloudEmbeds.length > 0) {
+
+            console.log(cookie.cookie);
+
+            soundcloudEmbeds.forEach(embed => {
+
+                let embedContainer = embed.querySelector('.container');
+                let iframeEl = embed.querySelector('iframe');
+                const iframeSrc = iframeEl.src;
+
+                if(cookie.cookie.categories.includes('analytics')) {
+                    // Remove any classes blocking interaction
+                    if(embed.classList.contains('cookies-rejected')) {
+                        embed.classList.remove('cookiesRejected');
+                        if(embedContainer.querySelector('.cookies-rejected__message')) {
+                            let cookiesMessage = embedContainer.querySelector('.cookies-rejected__message');
+                            embedContainer.removeChild(cookiesMessage);
+                        }
+                        if(iframeEl.src == '') {
+                            iframeEl.src = iframeSrc;
+                        }
+                    }
+                } else {
+                    iframeEl.src = 'about:blank';
+                    embed.classList.add('cookies-rejected')
+                    let cookiesText = document.createElement('p');
+                    cookiesText.classList.add('cookies-rejected__message');
+                    cookiesText.innerHTML = 'You must accept analytics cookies to view this media';
+                    embedContainer.appendChild(cookiesText);
+                }
+
+            })
+        }
     },
 
     onChange: function (cookie, changed_preferences) {

resources/css/site.css

@@ -0,0 +1 @@
+

resources/js/config.js

@@ -53,3 +53,14 @@
     }
 
 }
+
+@media screen and ( min-width: 800px ) {
+    .home-hero .addon.rise-up {
+        align-items: flex-start;
+        margin-top: 200px;
+    }
+    
+    .wrapper.rise-up {
+        align-items: flex-end;
+    }
+}

resources/js/consentchecker.js

@@ -0,0 +1,35 @@
+.soundcloud-embed-component {
+    padding-inline: 1rem;
+
+    .container {
+        padding: 0;
+    }
+}
+.cookies-rejected {
+    .container {
+        position: relative;
+        z-index: 3;
+
+        p {
+            display: block;
+            left: 50%;
+            padding-inline: rem(20);
+            position: absolute;
+            text-align: center;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            z-index: 2;
+        }
+
+        &:before {
+            background: #ccc;
+            content: "";
+            display: block;
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            z-index: 1;
+        }
+    }
+}