refactor and support cookiebot datalayer for google tagmanager

add cookiebot button and youtube shortcodes
brandcom · Oct 4, 2022 · 40a84a6 · 40a84a6
1 parent 040d575
commit 40a84a6
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 23 deletions.
diff --git a/_config.php b/_config.php
@@ -4,8 +4,36 @@
 use SilverStripe\View\Parsers\ShortcodeParser;
 
 ShortcodeParser::get('default')->register('cookiedeclaration',
-    function ($arguments, $content = null, $parser, $shortcode) {
+    function ($arguments, $content = null, $parser = null, $tagName = null) {
         $config = SiteConfig::current_site_config();
         return '<script id="CookieDeclaration" src="https://consent.cookiebot.com/' . $config->CookiebotId . '/cd.js" type="text/javascript" async></script>';
     }
 );
+
+ShortcodeParser::get('default')->register(
+    'cookiebot',
+    function ($arguments, $content = null, $parser = null, $tagName = null) {
+        $content = (empty($content)) ? 'Cookie Zustimmungsänderung' : $content;
+        return sprintf(
+            "<a href=\"javascript:Cookiebot.renew();\">%s</a>",
+            $content
+        );
+    }
+);
+
+ShortcodeParser::get('default')->register('youtube',
+    function ($arguments, $content = null, $parser = null, $tagName = null) {
+        if (empty($arguments['id'])) {
+            return '[youtube] shortcode fehlt die ID des Films [youtube,id="dieYoutubeId"]';
+        }
+        $youtubeID = htmlspecialchars($arguments['id']);
+        return sprintf(
+            '<iframe data-cookieconsent="marketing" data-src="https://www.youtube-nocookie.com/embed/%1$s?rel=0"></iframe>' .
+            '<div class="cookieconsent-optout-marketing">
+  <p>Bitte lassen Sie <a href="javascript:Cookiebot.renew()">Cookies</a> zu, um das Youtube Video anzuzeigen.</p>
+  <p>Oder schauen Sie es <a target="_blank" href="https://www.youtube.com/watch?v=%1$s">hier direkt auf Youtube</a> an.</p>
+</div>',
+            $youtubeID);
+    }
+);
+
diff --git a/src/SiteConfigDataExtension.php b/src/SiteConfigDataExtension.php
@@ -1,4 +1,5 @@
 <?php
+
 namespace jbennecker\Analytics;
 
 use SilverStripe\Forms\FieldList;
@@ -7,16 +8,33 @@
 
 class SiteConfigDataExtension extends DataExtension
 {
+
     private static $db = [
         'CookiebotId' => 'Varchar',
-        'GaTrackingId' => 'Varchar',
-        'MatomoTrackingId' => 'Varchar',
+        'GoogleTagManagerID' => 'Varchar',
+        'MatomoTagManagerContainerId' => 'Varchar',
     ];
 
     public function updateCMSFields(FieldList $fields)
     {
-        $fields->addFieldToTab("Root.Tracking", new TextField("CookiebotId"));
-        $fields->addFieldToTab("Root.Tracking", new TextField("GaTrackingId"));
-        $fields->addFieldToTab("Root.Tracking", new TextField("MatomoTrackingId"));
+        $fields->addFieldToTab("Root.Tracking",
+            TextField::create("CookiebotId", 'Cookiebot Id')
+                ->setDescription('Only Cookie-blocking mode <strong>Manual</strong>'));
+
+        $fields->addFieldToTab("Root.Tracking",
+            TextField::create("GoogleTagManagerID", 'Google TagManager ID')
+        );
+
+        $MatomoHelpText = <<<HTML
+ID ist auch im TagManager Snippet src URL in "https://stats.brandcom.de/js/container_<strong>[Container ID]</strong>.js" zu finden. <br>
+Bitte <strong>Disable Cookies</strong> und <strong>Bundle Tracker</strong>  in der Matomo TagManager Konfiguration einschalten!"
+HTML;
+
+        $fields->addFieldToTab("Root.Tracking",
+            TextField::create("MatomoTagManagerContainerId",
+                'Matomo TagManager Container ID')
+                ->setDescription($MatomoHelpText)
+        );
+
     }
 }
diff --git a/templates/Includes/Tracking.ss b/templates/Includes/Tracking.ss
@@ -1,14 +1,27 @@
+<% if $SiteConfig.GoogleTagManagerID %>
+    <!-- Google Consent Mode -->
+    <script data-cookieconsent="ignore">
+        window.dataLayer = window.dataLayer || [];
+        function gtag() {
+            dataLayer.push(arguments)
+        }
+        gtag("consent", "default", {
+            ad_storage: "denied",
+            analytics_storage: "denied",
+            functionality_storage: "denied",
+            personalization_storage: "denied",
+            security_storage: "granted",
+            wait_for_update: 500
+        });
+        gtag("set", "ads_data_redaction", true);
+    </script>
+    <!-- End Google Consent Mode-->
+<% end_if %>
 <% if $SiteConfig.CookiebotId %>
-    <script
-        id="Cookiebot"
-        src="https://consent.cookiebot.com/uc.js"
-        data-cbid="$SiteConfig.CookiebotId"
-        type="text/javascript"
-        async
-    ></script>
+    <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="$SiteConfig.CookiebotId"
+            type="text/javascript" async></script>
 <% end_if %>
-
-<% if $SiteConfig.GaTrackingId %>
+<% if $SiteConfig.GoogleTagManagerID %>
     <!-- Google Tag Manager -->
     <script
         data-cookieconsent="statistics"
@@ -18,19 +31,17 @@
         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
         j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-        })(window,document,'script','dataLayer','GTM-5KJKLT7');
+        })(window,document,'script','dataLayer', '$SiteConfig.GoogleTagManagerID');
     </script>
     <!-- End Google Tag Manager -->
 <% end_if %>
-
-<% if $SiteConfig.MatomoTrackingId %>
-    <script
-        data-cookieconsent="statistics"
-        type="text/plain"
-    >
+<% if $SiteConfig.MatomoTagManagerContainerId %>
+    <!-- Matomo Tag Manager -->
+    <script data-cookieconsent="ignore">
         var _mtm = window._mtm = window._mtm || [];
         _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
         var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.async=true; g.src='https://stats.brandcom.de/js/container_$MatomoTrackingId.js'; s.parentNode.insertBefore(g,s);
+        g.async=true; g.src='https://stats.brandcom.de/js/container_$SiteConfig.MatomoTagManagerContainerId\.js'; s.parentNode.insertBefore(g,s);
     </script>
+    <!-- End Matomo Tag Manager -->
 <% end_if %>