Implémentation utilisant le rendu côté serveur
Les frameworks modernes comme React, Angular ou Vue prennent généralement en charge deux modes de rendu pour afficher un site web. Le rendu typique est le rendu côté client, où le composant JavaScript se charge d'assembler le code HTML du site. L'alternative est le rendu côté serveur. Dans ce cas, le code HTML est déjà créé sur le serveur et mis à jour dans le navigateur.
Rendu côté serveur AngularJS
Pour utiliser le consentmanager script dans un site Web AngularJS avec rendu côté serveur, vous devez utiliser le code de blocage semi-automatique de consentmanager dans la version en tant que code de script externe :
Dans votre application Angular, vous devrez démonter le that you copied and insert it into your main or page component into the function 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 consentmanager script 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 en tant que code de script externe :
Dans votre application Next.JS, vous devrez légèrement ajuster le that you copied and insert it into your main or page component. The adjustments to be made are:
- Changer
<script ...>à<Script ...>(S majuscule) - Ajouter un attribut
strategy="afterInteractive"à la<Script ...>
Exemple de 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 consentmanager script dans un site Web ReactJS avec rendu côté serveur, vous devez utiliser le code de blocage semi-automatique de consentmanager dans la version en tant que code de script externe :
Afin d'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 de 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 consentmanager script 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 en tant que code de script externe :
Afin d'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>