Login

Try consentmanager
Book a call

Mise en œuvre à l'aide du rendu côté serveur

Les frameworks modernes comme React, Angular ou Vue prennent généralement en charge deux modes de rendu pour afficher le site web. Le rendu classique est le rendu côté client, où le composant JavaScript se charge d'assembler le code HTML du site web. L'alternative à cela s'appelle le rendu côté serveur. Ici, le code HTML est déjà créé sur le serveur et n'est que « hydraté » dans le navigateur.

Rendu côté serveur AngularJS

Pour utiliser le script ConsentManager dans un site web AngularJS avec rendu côté serveur, vous devez utiliser le code de blocage semi-automatique de ConsentManager dans la version sous forme de code de script externe :

  1. Allez dans Menu > CMP > Obtenir les codes pour… les sites web
  2. Cliquez sur « Blocage semi-automatique »
  3. Cliquez sur Code externe
  4. Copiez le code

Dans votre application Angular, vous devrez décomposer le code <script> que vous avez copié et l'insérer dans votre composant principal ou de page, dans la fonction ngOnInit(){...}. Exemple :

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

Rendu côté serveur Next.JS

Pour utiliser le script ConsentManager dans un site web Next.JS avec rendu côté serveur, vous devez utiliser le code de blocage semi-automatique de ConsentManager dans la version sous forme de code de script externe :

  1. Allez dans Menu > CMP > Obtenir les codes pour… les sites web
  2. Cliquez sur « Blocage semi-automatique »
  3. Cliquez sur Code externe
  4. Copiez le code

Dans votre application Next.JS, vous devrez légèrement modifier le code <script> que vous avez copié et l'insérer dans votre composant principal ou dans le composant de la page. Les modifications à apporter sont les suivantes :

  • Modifier <script ...> en <Script ...> (S majuscule)
  • Ajoutez l'attribut strategy="afterInteractive" à la <Script ...>

Exemple de fichier 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>
    );
}

Rendu côté serveur ReactJS

Pour utiliser le script ConsentManager dans un site web ReactJS avec rendu côté serveur, vous devez utiliser le code de blocage semi-automatique de ConsentManager dans la version sous forme de code de script externe :

  1. Allez dans Menu > CMP > Obtenir les codes pour… les sites web
  2. Cliquez sur « Blocage semi-automatique »
  3. Cliquez sur Code externe
  4. Copiez le code

Pour utiliser notre code dans votre application React.JS, nous vous recommandons d'utiliser le <Helmet> composant pour insérer le code CMP en ajoutant "helmet" et "react-helmet" en tant que dépendance à votre projet. Exemple de composant :

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;

Rendu côté serveur Vue.JS

Pour utiliser le script ConsentManager dans un site web Vue.JS avec rendu côté serveur, vous devez utiliser le code de blocage semi-automatique de ConsentManager dans la version sous forme de code de script externe :

  1. Allez dans Menu > CMP > Obtenir les codes pour… les sites web
  2. Cliquez sur « Blocage semi-automatique »
  3. Cliquez sur Code externe
  4. Copiez le code

Pour utiliser notre code dans votre application Vue.JS, nous vous recommandons d'utiliser le composant unHead de @unhead/vue (dépendances @unhead/vue et @vueuse/head). Exemple :

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