matomo fix

components/HeroBox.vue

@@ -0,0 +1,99 @@
+// components/HeroBox.vue
+<template>
+  <section class="heroBox" :aria-label="ariaLabel">
+    <NuxtImg
+      provider="strapi"
+      :src="image"
+      class="hero-bg"
+      sizes="sm:100vw md:100vw lg:100vw"
+      alt=""
+      aria-hidden="true"
+      priority
+      loading="eager"
+      preload
+      fetchpriority="high"
+    />
+    <div class="container-10 content">
+      <h1>{{ $t(content.headline1) }}</h1>
+      <h2>{{ $t(content.headline2) }}</h2>
+      <h3>{{ $t(content.headline3) }}</h3>
+    </div>
+    <svg class="sectionWave wave-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
+      <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
+    </svg>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  image: String,
+  ariaLabel: String,
+  content: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<style lang="sass" scoped>
+.heroBox
+  position: relative
+  min-height: 35rem
+  height: 70vh
+  display: flex
+  align-items: center
+  justify-content: center
+  overflow: hidden
+
+  &::after
+    position: absolute
+    content: ""
+    z-index: 0
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    background-image: linear-gradient(
+      to bottom right,
+      rgba(255,255,255,0.4) 0%,
+      rgba(255,255,255,0.3) 2%,
+      rgba(0, 0, 0, 0.7) 60%,
+      rgba(255, 255, 255, 0) 100%,
+      transparent 100%
+    )
+
+  .hero-bg
+    position: absolute
+    inset: 0
+    width: 100%
+    height: 100%
+    object-fit: cover
+    object-position: center top
+    z-index: -1
+
+  .content, h1, h2, h3
+    position: relative
+    z-index: 1
+
+  h1, h2, h3
+    color: white
+    z-index: 2
+    line-height: 1.5
+    max-width: 70%
+    @media (max-width: 768px)
+      max-width: 100%
+
+  h1
+    margin-top: 3rem
+    font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem)
+    margin-bottom: 0
+    font-family: 'Comfortaa'
+
+  h2
+    font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
+    margin: .8rem 0 .8rem 0
+    font-family: 'Comfortaa'
+
+  h3
+    font-size: 1.2rem
+</style>

components/TrackingScripts.vue

@@ -1,40 +1,39 @@
 <template>
   <!-- intentionally empty -->
 </template>
+
 <script setup>
-if (import.meta.client) {
+import { onMounted } from 'vue'
+
+const isLocalhost = window.location.hostname === 'localhost'
+
+// Umami nur aktivieren, wenn NICHT localhost
+if (import.meta.client && !isLocalhost) {
   useHead({
     script: [
-      {
-        innerHTML: `
-          var _paq = window._paq = window._paq || [];
-          _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
-          _paq.push(["setCookieDomain", "*.digimedialoop.de"]);
-          _paq.push(["disableCookies"]);
-          _paq.push(['trackPageView']);
-          _paq.push(['enableLinkTracking']);
-          (function() {
-            var u = "//analytics.digimedialoop.de/";
-            _paq.push(['setTrackerUrl', u + 'matomo.php']);
-            _paq.push(['setSiteId', '1']);
-            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-            g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
-          })();
-        `,
-        type: 'text/javascript',
-        charset: 'utf-8',
-        // Optional: ID zum gezielten Sanitizer deaktivieren
-        hid: 'matomo-script'
-      },
       {
         src: 'https://umami.digimedialoop.de/script.js',
         defer: true,
         'data-website-id': '7f521c0f-28b8-4ca8-82bf-150a34e14da6'
       }
-    ],
+    ]
-    __dangerouslyDisableSanitizersByTagID: {
+  })
-      'matomo-script': ['innerHTML']
+
-    }
+  // Matomo Tracking-Skript dynamisch einfügen
+  onMounted(() => {
+    const _paq = (window._paq = window._paq || [])
+    _paq.push(["setDocumentTitle", document.domain + "/" + document.title])
+    _paq.push(["setCookieDomain", "*.digimedialoop.de"])
+    _paq.push(["disableCookies"])
+    _paq.push(["trackPageView"])
+    _paq.push(["enableLinkTracking"])
+    _paq.push(["setTrackerUrl", "//analytics.digimedialoop.de/matomo.php"])
+    _paq.push(["setSiteId", "1"])
+
+    const script = document.createElement("script")
+    script.src = "//analytics.digimedialoop.de/matomo.js"
+    script.async = true
+    document.head.appendChild(script)
   })
 }
 </script>

i18n/i18n-pages.ts

@@ -23,6 +23,22 @@ export const i18nPages = {
         es: '/servicios',
         tr: '/hizmetler'
       },    
+      'services/accessibility': {
+        de: '/leistungen/barrierefreiheit',
+        en: '/services/accessibility',
+        fr: '/services/accessibilite',
+        it: '/servizi/accessibilita',
+        es: '/servicios/accesibilidad',
+        tr: '/hizmetler/erisilebilirlik'
+      },    
+      'services/seo': {
+        de: '/leistungen/barrierefreiheit',
+        en: '/services/accessibility',
+        fr: '/services/accessibilite',
+        it: '/servizi/accessibilita',
+        es: '/servicios/accesibilidad',
+        tr: '/hizmetler/erisilebilirlik'
+      },    
       references: {
         de: '/referenzen',
         en: '/references',

i18n/locales/de.json

@@ -161,6 +161,20 @@
                 "headline": "Sie wollen mehr Speed und Leistung für Ihr Business?",
                 "text": "Wir bringen Ihre Website auf das nächste Level! Schnell, zuverlässig und individuell.",
                 "button": "Sprechen Sie mit uns!"
+            },
+            "accessibility": {
+                "hero": {
+                    "headline1": "Barrierefeies Webdesign",
+                    "headline2": "Zugänglichkeit für Mensch und Maschine nach den Standards WCAG und BITV",
+                    "headline3": "Verständlich, nutzbar und robust, für eine inklusive und zukunftssichere Webseite"
+                }
+            },
+            "seo": {
+                "hero": {
+                    "headline1": "Suchmaschinen-Optimierung",
+                    "headline2": "mit strukturierten Daten, Meta-Tags und semantischem HTML",
+                    "headline3": "Mehr Sichbarkeit durch technische Exzellenz!"
+                }
             }
         },
         "references": {

pages/index.vue

@@ -1,30 +1,14 @@
 <template>
   <div class="homePage">
-
+    <HeroBox
-    <section class="heroBox" :aria-label="$t('pages.services.hero.ariaLabel')">
+      image="/uploads/bg_technologie_d24f950ccf.webp"
-      <NuxtImg
+      :aria-label="$t('pages.services.hero.ariaLabel')"
-        provider="strapi"
+      :content="{
-        src="/uploads/bg_technologie_d24f950ccf.webp"              
+        headline1: 'pages.services.hero.headline1',
-        class="hero-bg"
+        headline2: 'pages.services.hero.headline2',
-        sizes="sm:100vw md:100vw lg:100vw"
+        headline3: 'pages.services.hero.headline3'
-        alt=""                  
+      }"
-        aria-hidden="true"    
-        priority 
-        loading="eager" 
-        preload
-        fetchpriority="high"
     /> 
-      <div class="container-10">
-        <h1>{{ $t('pages.services.hero.headline1') }}</h1>
-        <h2>{{ $t('pages.services.hero.headline2') }}</h2>
-        <h3>{{ $t('pages.services.hero.headline3') }}</h3>
-      </div>
-      <!-- Nach dem Container: Spiegelwelle unten -->
-      <svg class="sectionWave wave-bottom" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
-        <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
-      </svg>  
-    </section>
- 
 
     <section class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')">
         <NuxtImg
@@ -103,15 +87,12 @@ class="pinkBtn mt-3"
 <script setup>
 import { useMainStore } from '@/stores/main';
 import { storeToRefs } from 'pinia';
-import { defineAsyncComponent } from 'vue';
 import { useRouter } from 'vue-router';
-const router = useRouter();
 
 const mainStore = useMainStore();
 const { customers } = storeToRefs(mainStore);
 const toggleContactBubble = () => mainStore.toggleContactBubble();
 
-
 const screenWidth = computed(() => mainStore.screenWidth);
 const waveHeight = computed(() => (screenWidth.value / 25).toFixed(0));
 
@@ -124,73 +105,11 @@ const logoItems = computed(() => {
     }
   }))
 })
-
-
-
 </script>
 
 
 <style lang="sass">
 .homePage
-
-  .heroBox
-    position: relative
-    min-height: 35rem
-    height: 70vh
-    display: flex
-    align-items: center
-    justify-content: center
-    overflow: hidden     
-
-    &::after
-      position: absolute
-      content: ""
-      z-index: 0
-      top: 0
-      left: 0
-      width: 100%
-      height: 100%
-      background-image: linear-gradient(
-    to bottom right,
-    rgba(255,255,255,0.4) 0%,
-    rgba(255,255,255,0.3) 2%,
-    rgba(0, 0, 0, 0.7) 60%,
-    rgba(255, 255, 255, 0) 100%,
-    transparent 100%
-    )
-
-
-    .hero-bg
-      position: absolute
-      inset: 0                 
-      width: 100%
-      height: 100%
-      object-fit: cover
-      object-position: center top
-      z-index: -1               
-
-    .container-10, h1, h2, h3
-      position: relative
-      z-index: 1               
-    h1, h2, h3
-      color: white
-      z-index: 2
-      line-height: 1.5
-      max-width: 70%
-      @media (max-width: $breakPointMD)
-        max-width:  100%
-    h1
-      margin-top: 3rem  
-      font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem)
-      margin-bottom: 0
-      font-family: 'Comfortaa'
-    h2
-      font-size: clamp(1.2rem, .7rem + 2vw, 2rem)      
-      margin: .8rem 0 .8rem 0
-      font-family: 'Comfortaa'
-    h3
-      font-size: 1.2rem
-
   .explainBox
     position: relative
     overflow: hidden
@@ -220,10 +139,6 @@ const logoItems = computed(() => {
         font-family: 'Mainfont-Bold'
         font-size: 1.2rem  
 
-  
-  
-  
-
 .firstTeaser
   h2
     font-size: 1.6rem
@@ -250,9 +165,4 @@ const logoItems = computed(() => {
     line-height: 1.5
   p
     padding-right: 1rem
-  
-
-
-
-
 </style>

pages/services/accessibility/index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="accessiblityPage">
+        <HeroBox
+            image="/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp"
+            :aria-label="$t('pages.services.accessibility.hero.ariaLabel')"
+            :content="{
+                headline1: 'pages.services.accessibility.hero.headline1',
+                headline2: 'pages.services.accessibility.hero.headline2',
+                headline3: 'pages.services.accessibility.hero.headline3'
+            }"
+        /> 
+    </div>
+</template>
+
+<script setup>
+definePageMeta({
+  alias: [
+    '/leistungen/barrierefreie-webseiten', // Deutsch
+    '/services/accessibility',             // Englisch
+    '/services/accessibilite',             // Französisch
+    '/servizi/accessibilita',              // Italienisch
+    '/servicios/accesibilidad',            // Spanisch
+    '/hizmetler/erisilebilirlik'           // Türkisch
+  ]
+})
+
+</script>
+
+<style lang="sass">
+
+</style>

pages/services/seo/index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="accessiblityPage">
+        <HeroBox
+            image="/uploads/DML_Service_Header_SEO_b11ae8940a.webp"
+            :aria-label="$t('pages.services.seo.hero.ariaLabel')"
+            :content="{
+                headline1: 'pages.services.seo.hero.headline1',
+                headline2: 'pages.services.seo.hero.headline2',
+                headline3: 'pages.services.seo.hero.headline3'
+            }"
+        /> 
+    </div>
+</template>
+
+<script setup>
+definePageMeta({
+  alias: [
+    '/leistungen/suchmaschinenoptimierung',     // Deutsch
+    '/services/search-engine-optimization',     // Englisch
+    '/services/optimisation-pour-moteurs',      // Französisch
+    '/servizi/ottimizzazione-motori-di-ricerca',// Italienisch
+    '/servicios/optimizacion-motores-busqueda', // Spanisch
+    '/hizmetler/arama-motoru-optimizasyonu'     // Türkisch
+  ]
+})
+
+</script>
+
+<style lang="sass">
+
+</style>