Implementierung mit Server-Side Rendering
Moderne Frameworks wie React, Angular oder Vue unterstützen in der Regel zwei Rendering-Modi zur Darstellung der Website. Das typische Rendering ist das Client-Side Rendering, bei dem sich die JavaScript-Komponente um die Zusammenstellung des HTML-Codes der Website kümmert. Die Alternative dazu heißt Server-Side Rendering. Hierbei wird der HTML-Code bereits serverseitig erstellt und erst im Browser „hydratisiert“.
Serverseitiges Rendering mit AngularJS
Um die consentmanager Skript in einer AngularJS-Website mit serverseitigem Rendering, müssen Sie den halbautomatischen Blockierungscode von verwenden consentmanager in der Version als externer Skriptcode:
In Ihrer Angular App müssen Sie die that you copied and insert it into your main or page component into the function ngOnInit(){...}. Beispiel:
import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { isPlatformBrowser } from '@angular/common';
@Component({
selector: 'app-test',
standalone: true,
template: `
<div>... some HTML ... </div>
`
})
export class TestComponent implements OnInit {
constructor(
private meta: Meta,
private title: Title,
@Inject(PLATFORM_ID) private platformId: Object
) {}
ngOnInit() {
this.title.setTitle('Angular SSR Demo');
if (isPlatformBrowser(this.platformId)) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.consentmanager.net/delivery/js/semiautomatic.min.js';
script.setAttribute('data-cmp-ab', '1');
script.setAttribute('data-cmp-cdid', '...'); //Todo: Insert Code-ID from your CMP code
script.setAttribute('data-cmp-host', '...'); //Todo: Insert host-value from your CMP code
script.setAttribute('data-cmp-cdn', '...'); //Todo: Insert cdn-value from your CMP Code
script.setAttribute('data-cmp-codesrc', '0');
document.head.appendChild(script);
}
}
}
Serverseitiges Rendering von Next.JS
Um die consentmanager Skript in einer Next.JS-Website mit serverseitigem Rendering, müssen Sie den halbautomatischen Blockierungscode von verwenden consentmanager in der Version als externer Skriptcode:
In Ihrer Next.JS App müssen Sie die that you copied and insert it into your main or page component. The adjustments to be made are:
- Veränderung
<script ...>zu<Script ...>(großes S) - Attribute hinzufügen
strategy="afterInteractive"zu den<Script ...>
Beispielseite.tsx:
'use client';
import React from 'react';
import Script from 'next/script';
import Head from 'next/head';
export default function TestPage() {
return (
<div>
<Head>
<title>Next.js SSR Demo</title>
</Head>
<h1 style={{color: '#0070F3'}}>SSR Demo Page</h1>
<Script strategy="afterInteractive" type="text/javascript" data-cmp-ab="1"
src="https://cdn.consentmanager.net/delivery/js/semiautomatic.min.js"
data-cmp-cdid="..." //Todo: Add Code-ID from your CMP-Code
data-cmp-host="..." //Todo: Add host-value from your CMP-Code
data-cmp-cdn="..." //Todo: Add cdn-value from your CMP-Code
data-cmp-codesrc="0"></Script>
</div>
);
}Serverseitiges Rendering mit ReactJS
Um die consentmanager Skript in einer ReactJS-Website mit serverseitigem Rendering, müssen Sie den halbautomatischen Blockierungscode von verwenden consentmanager in der Version als externer Skriptcode:
Um unseren Code in Ihrer React.JS-App zu verwenden, empfehlen wir die Verwendung von <Helmet> Komponente zum Einfügen des CMP-Codes durch Hinzufügen "helmet" und "react-helmet" als Abhängigkeit zu Ihrem Projekt. Beispielkomponente:
import React from 'react';
import { Helmet } from 'react-helmet';
const ScriptDemo = () => {
return (
<div >
<Helmet>
{/* This is where custom scripts can be injected */}
<script type="text/javascript" data-cmp-ab="1"
src="https://cdn.consentmanager.net/delivery/js/semiautomatic.min.js"
data-cmp-cdid="..." //Todo: Insert Code-ID from your CMP-Code
data-cmp-host="..." //Todo: Insert host-value from your CMP-Code
data-cmp-cdn="..." //Todo: Insert cdn-value from your CMP-Code
data-cmp-codesrc="0"></script>
</Helmet>
<div >
... HTML Code ...
</div>
</div>
);
};
export default ScriptDemo;
Serverseitiges Rendering in Vue.JS
Um die consentmanager Skript in einer Vue.JS-Website mit serverseitigem Rendering, müssen Sie den halbautomatischen Blockierungscode von verwenden consentmanager in der Version als externer Skriptcode:
Um unseren Code in Ihrer Vue.JS-App zu verwenden, empfehlen wir die Verwendung der Komponente unHead von @unhead/vue (Abhängigkeiten @unhead/vue und @vueuse/head). Beispiel:
<template>
<div>
<h1>Script Demo Page</h1>
... some HTML Code ...
</div>
</template>
<script setup>
import { useHead } from '@unhead/vue';
// Set page metadata and script
useHead({
title: 'Vue SSR Demo',
script: [
{
src: 'https://cdn.consentmanager.net/delivery/js/semiautomatic.min.js',
type: 'text/javascript',
'data-cmp-ab': '1',
'data-cmp-cdid': '...', //Todo: Insert Code-ID from your CMP-Code
'data-cmp-host': '...', //Todo: Insert host-value from your CMP-Code
'data-cmp-cdn': '...', //Todo: Insert cdn-value from your CMP-Code
'data-cmp-codesrc': '0'
}
]
});
</script>