Implementazione tramite rendering lato server

I framework moderni come React, Angular o Vue di solito supportano due modalità di rendering per visualizzare il sito web. Il rendering tipico è il Client-Side Rendering, in cui il componente JavaScript si occupa di assemblare il codice HTML del sito web. L'alternativa a questo si chiama Server-Side Rendering. In questo caso il codice HTML è già stato creato sul server e viene solo "idratato" nel browser.

Rendering lato server con AngularJS

Per utilizzare lo script di ConsentManager in un sito web AngularJS con rendering lato server, devi utilizzare il codice di blocco semi-automatico di ConsentManager nella versione come codice script esterno:

Vai su Menu > CMP > Ottieni codici per… Siti web
Clicca su Blocco semiautomatico
Clicca su Codice esterno
Copia il codice

Nella tua app Angular dovrai scomporre il codice <script> che hai copiato e inserirlo nel tuo componente principale o nella pagina all'interno della funzione ngOnInit(){...}. Esempio:

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 Rendering lato server

Per utilizzare lo script di Consentmanager in un sito web Next.JS con rendering lato server, devi utilizzare il codice di blocco semi-automatico di Consentmanager nella versione come codice script esterno:

Vai su Menu > CMP > Ottieni codici per… Siti web
Clicca su Blocco semiautomatico
Clicca su Codice esterno
Copia il codice

Nella tua app Next.JS dovrai modificare leggermente il codice <script> che hai copiato e inserirlo nel tuo componente main o page. Le modifiche da apportare sono:

Modifica <script ...> in <Script ...> (S maiuscola)
Aggiungi l'attributo strategy="afterInteractive" al <Script ...>

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

Rendering lato server con ReactJS

Per utilizzare lo script di ConsentManager in un sito web ReactJS con rendering lato server, devi utilizzare il codice di blocco semi-automatico di ConsentManager nella versione come codice script esterno:

Vai su Menu > CMP > Ottieni codici per… Siti web
Clicca su Blocco semiautomatico
Clicca su Codice esterno
Copia il codice

Per utilizzare il nostro codice nella tua app React.JS, ti consigliamo di utilizzare il <Helmet> componente per inserire il codice CMP aggiungendo "helmet" e "react-helmet" come dipendenza al tuo progetto. Esempio di componente:

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;

Rendering lato server con Vue.JS

Per utilizzare lo script di Consentmanager in un sito web Vue.JS con rendering lato server, devi utilizzare il codice di blocco semi-automatico di Consentmanager nella versione come codice script esterno:

Vai su Menu > CMP > Ottieni codici per… Siti web
Clicca su Blocco semiautomatico
Clicca su Codice esterno
Copia il codice

Per utilizzare il nostro codice nella tua app Vue.JS, ti consigliamo di utilizzare il componente unHead da @unhead/vue (dipendenze @unhead/vue e @vueuse/head). Esempio:

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