Login

Try consentmanager
Book a call

Implementierung mittels serverseitigem 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 die JavaScript-Komponente für die Zusammenstellung des HTML-Codes der Website zuständig ist. Die Alternative dazu wird als Server-Side Rendering bezeichnet. Hier wird der HTML-Code bereits auf dem Server erstellt und im Browser nur noch „hydriert“.

AngularJS Server-Side Rendering

Um das ConsentManager-Skript in einer AngularJS-Website mit serverseitigem Rendering zu verwenden, müssen Sie den halbautomatischen Blocking-Code von ConsentManager in der Version als externen Skriptcode verwenden:

  1. Gehen Sie zu Menü > CMPs > Codes abrufen für … Websites
  2. Klicken Sie auf „Halbautomatische Blockierung“
  3. Klicken Sie auf „Externer Code“
  4. Kopiere den Code

In deiner Angular-App musst du den kopierten <script> zerlegen und ihn in deine Haupt- oder Seitenkomponente in die Funktion 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);
    }
  }
}

Next.JS Server-side Rendering

Um das ConsentManager-Skript in einer Next.JS-Website mit serverseitigem Rendering zu verwenden, müssen Sie den halbautomatischen Blocking-Code von ConsentManager in der Version als externen Skriptcode verwenden:

  1. Gehen Sie zu Menü > CMPs > Codes abrufen für … Websites
  2. Klicken Sie auf „Halbautomatische Blockierung“
  3. Klicken Sie auf „Externer Code“
  4. Kopiere den Code

In Ihrer Next.JS-App müssen Sie den kopierten Code <script> leicht anpassen und in Ihre Haupt- oder Seitenkomponente einfügen. Folgende Anpassungen sind vorzunehmen:

  • Ändern <script ...> in <Script ...> (großes S)
  • Füge das Attribut strategy="afterInteractive" zum <Script ...>

Beispiel page.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>
    );
}

ReactJS Server-side Rendering

Um das ConsentManager-Skript in einer ReactJS-Website mit serverseitigem Rendering zu verwenden, müssen Sie den halbautomatischen Blocking-Code von ConsentManager in der Version als externen Skriptcode verwenden:

  1. Gehen Sie zu Menü > CMPs > Codes abrufen für … Websites
  2. Klicken Sie auf „Halbautomatische Blockierung“
  3. Klicken Sie auf „Externer Code“
  4. Kopiere den Code

Um unseren Code in Ihrer React.JS-App zu verwenden, empfehlen wir die Verwendung der <Helmet> Komponente zum Einfügen des CMP-Codes, indem du "helmet" und "react-helmet" als Abhängigkeit zu Ihrem Projekt hinzuzufügen. 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;

Vue.JS Server-seitiges Rendering

Um das ConsentManager-Skript in einer Vue.JS-Website mit serverseitigem Rendering zu verwenden, müssen Sie den halbautomatischen Blocking-Code von ConsentManager in der Version als externen Skriptcode verwenden:

  1. Gehen Sie zu Menü > CMPs > Codes abrufen für … Websites
  2. Klicken Sie auf „Halbautomatische Blockierung“
  3. Klicken Sie auf „Externer Code“
  4. Kopiere den Code

Um unseren Code in Ihrer Vue.JS-App zu verwenden, empfehlen wir die Verwendung der Komponente unHead aus @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>

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!