digimedialoop/dml_frontend
digimedialoop/dml_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

matomo fix

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-05-30 11:40:16 +02:00
parent ecd2829c95
commit e97365b0b6
7 changed files with 227 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
components/HeroBox.vue Normal file
View File

@ -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>

53
components/TrackingScripts.vue
View File

@ -1,40 +1,39 @@
<template>
<!-- intentionally empty -->
<!-- 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>

18
i18n/i18n-pages.ts
View File

@ -22,7 +22,23 @@ export const i18nPages = {
it: '/servizi',
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',

14
i18n/locales/de.json
View File

@ -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": {

108
pages/index.vue
View File

@ -1,30 +1,14 @@
<template>
<div class="homePage">
<section class="heroBox" :aria-label="$t('pages.services.hero.ariaLabel')">
<NuxtImg
provider="strapi"
src="/uploads/bg_technologie_d24f950ccf.webp"
class="hero-bg"
sizes="sm:100vw md:100vw lg:100vw"
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>
<HeroBox
image="/uploads/bg_technologie_d24f950ccf.webp"
:aria-label="$t('pages.services.hero.ariaLabel')"
:content="{
headline1: 'pages.services.hero.headline1',
headline2: 'pages.services.hero.headline2',
headline3: 'pages.services.hero.headline3'
}"
/>
<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
@ -219,10 +138,6 @@ const logoItems = computed(() => {
h3
font-family: 'Mainfont-Bold'
font-size: 1.2rem
.firstTeaser
h2
@ -250,9 +165,4 @@ const logoItems = computed(() => {
line-height: 1.5
p
padding-right: 1rem
</style>

31
pages/services/accessibility/index.vue Normal file
View File

@ -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>

31
pages/services/seo/index.vue Normal file
View File

@ -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>