Wdrożenie z wykorzystaniem renderowania po stronie serwera

Nowoczesne frameworki, takie jak React, Angular czy Vue, zazwyczaj obsługują dwa tryby renderowania do wyświetlania strony internetowej. Typowym renderowaniem jest renderowanie po stronie klienta (Client-Side Rendering), gdzie komponent JavaScript zajmuje się składaniem kodu HTML strony. Alternatywą dla tego jest renderowanie po stronie serwera (Server-Side Rendering). W tym przypadku kod HTML jest już utworzony na serwerze i jedynie „hydratowany” w przeglądarce.

Renderowanie po stronie serwera w AngularJS

Aby użyć skryptu ConsentManager na stronie internetowej opartej na AngularJS z renderowaniem po stronie serwera, musisz użyć półautomatycznego kodu blokującego ConsentManager w wersji jako zewnętrzny kod skryptu:

Przejdź do Menu > CMP > Pobierz kody dla… stron internetowych
Kliknij na „Blokowanie półautomatyczne”
Kliknij na Kod zewnętrzny
Skopiuj kod

W aplikacji Angular musisz rozłożyć skopiowany element <script> i wstawić go do komponentu głównego lub strony w funkcji ngOnInit(){...}. Przykład:

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);
    }
  }
}

Renderowanie po stronie serwera w Next.JS

Aby użyć skryptu ConsentManager na stronie internetowej Next.JS z renderowaniem po stronie serwera, musisz użyć półautomatycznego kodu blokującego ConsentManager w wersji jako zewnętrzny kod skryptu:

Przejdź do Menu > CMP > Pobierz kody dla… stron internetowych
Kliknij na „Blokowanie półautomatyczne”
Kliknij na Kod zewnętrzny
Skopiuj kod

W aplikacji Next.JS musisz nieznacznie dostosować skopiowany plik <script> i wstawić go do komponentu głównego lub strony. Należy wprowadzić następujące zmiany:

Zmień <script ...> na <Script ...> (wielką literą S)
Dodaj atrybut strategy="afterInteractive" do <Script ...>

Przykładowa strona.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>
    );
}

Renderowanie po stronie serwera w ReactJS

Aby użyć skryptu ConsentManager na stronie internetowej opartej na ReactJS z renderowaniem po stronie serwera, musisz użyć półautomatycznego kodu blokującego ConsentManager w wersji jako zewnętrzny kod skryptu:

Przejdź do Menu > CMP > Pobierz kody dla… stron internetowych
Kliknij na „Blokowanie półautomatyczne”
Kliknij na Kod zewnętrzny
Skopiuj kod

Aby użyć naszego kodu w aplikacji React.JS, zalecamy użycie komponentu <Helmet> komponentu do wstawienia kodu CMP poprzez dodanie "helmet" i "react-helmet" jako zależność do swojego projektu. Przykładowy komponent:

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;

Renderowanie po stronie serwera w Vue.JS

Aby użyć skryptu ConsentManager na stronie internetowej opartej na Vue.JS z renderowaniem po stronie serwera, musisz użyć półautomatycznego kodu blokującego ConsentManager w wersji jako zewnętrzny kod skryptu:

Przejdź do Menu > CMP > Pobierz kody dla… stron internetowych
Kliknij na opcję „Blokowanie półautomatyczne”
Kliknij na Kod zewnętrzny
Skopiuj kod

Aby użyć naszego kodu w swojej aplikacji Vue.JS, zalecamy użycie komponentu unHead z @unhead/vue (zależności @unhead/vue i @vueuse/head). Przykład:

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