fix: properly initialize CMP, GTM and data layer for tracking

assets/controllers/data_layer_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static values = {
+        url: String,
+        title: String,
+        userInfo: String
+    };
+
+    connect() {
+        if (typeof window.dataLayer !== 'undefined') {
+            window.dataLayer.push({
+                'event': 'VirtualPageview',
+                'virtualPageURL': this.urlValue,
+                'virtualPageTitle': this.titleValue,
+                'userInfo': this.userInfoValue
+            });
+        }
+    }
+}

config/domain_config.yaml

@@ -1,18 +0,0 @@
-parameters:
-    domain_config:
-        ep-reisen.de:
-            theme: base
-            gtm_id: GTM-56LWRF
-            cmp_url: https://consent.cookiefirst.com/sites/my.ep-reisen.de-28eabc35-7085-4d8f-b450-522bd1a5247c/consent.js
-        ski-boarderweek.de:
-            theme: sbw
-            gtm_id: GTM-MS2C8CH
-            cmp_url: https://consent.cookiefirst.com/sites/my.ski-boarderweek.de-d3641c34-8183-4b8d-b56e-c052e7a9223e/consent.js
-        semesterende-skireisen.de:
-            theme: ser
-            gtm_id: GTM-MNKDKL9
-            cmp_url: https://consent.cookiefirst.com/sites/my.semesterende-skireisen.de-c9b3422d-eb62-4ce4-b8f7-91e9b509e26f/consent.js
-        snowzone.net:
-            theme: snz
-            gtm_id: GTM-M96CKL
-            cmp_url: https://consent.cookiefirst.com/sites/my.snowzone.net-8e6aea0c-7d93-42a0-a822-29fff2aa5613/consent.js

config/services.yaml

@@ -3,9 +3,6 @@
 
 # Put parameters here that don't need to change on each machine where the app is deployed
 # https://symfony.com/doc/current/best_practices.html#use-parameters-for-application-configuration
-imports:
-    - { resource: domain_config.yaml }
-
 parameters:
     travel_info_base_url: '%env(APP_TRAVEL_INFO_BASE_URL)%'
     terms_and_conditions_url: '%env(APP_TERMS_AND_CONDITIONS_URL)%'
@@ -33,6 +30,25 @@ parameters:
         '86 - 94kg': '86-94'
         '95kg oder mehr': '95+'
 
+    # domain mapping for theme, gtm id and cmp url
+    domain_config:
+        ep-reisen.de:
+            theme: base
+            gtm_id: GTM-56LWRF
+            cmp_url: https://consent.cookiefirst.com/sites/my.ep-reisen.de-28eabc35-7085-4d8f-b450-522bd1a5247c/consent.js
+        ski-boarderweek.de:
+            theme: sbw
+            gtm_id: GTM-MS2C8CH
+            cmp_url: https://consent.cookiefirst.com/sites/my.ski-boarderweek.de-d3641c34-8183-4b8d-b56e-c052e7a9223e/consent.js
+        semesterende-skireisen.de:
+            theme: ser
+            gtm_id: GTM-MNKDKL9
+            cmp_url: https://consent.cookiefirst.com/sites/my.semesterende-skireisen.de-c9b3422d-eb62-4ce4-b8f7-91e9b509e26f/consent.js
+        snowzone.net:
+            theme: snz
+            gtm_id: GTM-M96CKL
+            cmp_url: https://consent.cookiefirst.com/sites/my.snowzone.net-8e6aea0c-7d93-42a0-a822-29fff2aa5613/consent.js
+
 services:
     # default configuration for services in *this* file
     _defaults:

config/services_dev.yaml

@@ -0,0 +1,19 @@
+parameters:
+  # domain mapping for theme, gtm id and cmp url
+  domain_config:
+    myep.ddev.site:
+      theme: base
+      gtm_id: GTM-56LWRF
+      cmp_url: https://consent.cookiefirst.com/sites/my.ep-reisen.de-28eabc35-7085-4d8f-b450-522bd1a5247c/consent.js
+    myswb.ddev.site:
+      theme: sbw
+      gtm_id: GTM-MS2C8CH
+      cmp_url: https://consent.cookiefirst.com/sites/my.ski-boarderweek.de-d3641c34-8183-4b8d-b56e-c052e7a9223e/consent.js
+    myser.ddev.site:
+      theme: ser
+      gtm_id: GTM-MNKDKL9
+      cmp_url: https://consent.cookiefirst.com/sites/my.semesterende-skireisen.de-c9b3422d-eb62-4ce4-b8f7-91e9b509e26f/consent.js
+    mysnz.ddev.site:
+      theme: snz
+      gtm_id: GTM-M96CKL
+      cmp_url: https://consent.cookiefirst.com/sites/my.snowzone.net-8e6aea0c-7d93-42a0-a822-29fff2aa5613/consent.js

templates/_partials/_tracking.html.twig

@@ -1,12 +1,5 @@
-<script>
+<div {{ stimulus_controller('data-layer', {
-    window.dataLayer = window.dataLayer || [];
+    'url': url,
-    var consent = (window.CookieFirst && window.CookieFirst.consent) || { advertising: false };
+    'title': title,
-    if (consent.advertising) {
+    'userInfo': is_granted('ROLE_USER') ? 'mitglied' : 'gast'
-        dataLayer.push({
+}) }}></div>
-            'event':'VirtualPageview',
-            'virtualPageURL': '{{ url }}',
-            'virtualPageTitle': '{{ title }}',
-            'userInfo': '{{ is_granted('ROLE_USER') ? 'mitglied' : 'gast' }}'
-        });
-    }
-</script>

templates/base.html.twig

@@ -9,6 +9,7 @@
         <link rel="icon" href="{{ asset('build/favicon/icon.svg') }}" type="image/svg+xml">
         <link rel="apple-touch-icon" href="{{ asset('build/favicon/apple-touch-icon.png') }}">
         {% if cmp_url() is not empty %}
+            <script>window.dataLayer = window.dataLayer || [];</script>
             <script src="{{ cmp_url() }}"></script>
             <script type="text/plain" data-cookiefirst-category="necessary">
                 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -27,5 +28,6 @@
     </head>
     <body class="bg-white text-gray-700 font-sans antialiased {{ booking_theme() }}"{% if not oauth2 %} hx-boost="true"{% endif %}>
         {% block body %}{% endblock %}
+        {% block data_layer %}{% endblock %}
     </body>
 </html>

templates/booking/create/authenticate.html.twig

@@ -95,10 +95,6 @@
         </div>
 
     </div>
-    {% include '_partials/_tracking.html.twig' with {
-        'url': '/trichter_Z1/schritt0_login_oder_gast',
-        'title': 'Login oder Gast'
-    } %}
 {% endblock %}
 
 {% block footer %}
@@ -112,3 +108,10 @@
         </button>
     </div>
 {% endblock %}
+
+{% block data_layer %}
+    {% include '_partials/_tracking.html.twig' with {
+        'url': '/trichter_Z1/schritt0_login_oder_gast',
+        'title': 'Login oder Gast'
+    } %}
+{% endblock %}

templates/booking/create/step_1.html.twig

@@ -101,6 +101,9 @@
         </div>
     {{ form_rest(form) }}
     {{ form_end(form) }}
+{% endblock %}
+
+{% block data_layer %}
     {% include '_partials/_tracking.html.twig' with {
         'url': '/trichter_Z1/schritt1_zimmerauswahl',
         'title': 'Zimmerauswahl'

templates/booking/create/step_2.html.twig

@@ -75,6 +75,9 @@
         </div>
     {{ form_rest(form) }}
     {{ form_end(form) }}
+{% endblock %}
+
+{% block data_layer %}
     {% include '_partials/_tracking.html.twig' with {
         'url': '/trichter_Z1/schritt2_teilnehmende_leistungen',
         'title': 'Teilnehmende und Leistungen'

templates/booking/create/step_3.html.twig

@@ -85,6 +85,9 @@
         </div>
     {{ form_rest(form) }}
     {{ form_end(form) }}
+{% endblock %}
+
+{% block data_layer %}
     {% include '_partials/_tracking.html.twig' with {
         'url': '/trichter_Z1/schritt3_zahlungsart',
         'title': 'Zahlungsart'

templates/booking/create/step_4.html.twig

@@ -567,6 +567,9 @@
         </div>
     {{ form_rest(form) }}
     {{ form_end(form) }}
+{% endblock %}
+
+{% block data_layer %}
     {% include '_partials/_tracking.html.twig' with {
         'url': '/trichter_Z1/schritt4_uerbersicht_bestaetigung',
         'title': 'Übersicht und Bestätigung'

templates/booking/create/success.html.twig

@@ -55,6 +55,9 @@
 
         </div>
     </div>
+{% endblock %}
+
+{% block data_layer %}
     {% if bookingTotal is not null and travelName is not null %}
         <script>
             window.dataLayer = window.dataLayer || [];