Implementatie met behulp van Server-Side Rendering
Moderne frameworks zoals React, Angular of Vue ondersteunen doorgaans twee rendering modes om de website weer te geven. De typische rendering is Client-Side Rendering, waarbij het JavaScript component zorgt voor het assembleren van de HTML Code van de website. Het alternatief hiervoor heet Server-Side Rendering. Hierbij is de HTML code al op de server gemaakt en alleen "gehydrateerd" in de browser.
AngularJS Server-Side Rendering
Om de te gebruiken consentmanager script in een AngularJS-website met server-side rendering, moet u de semi-automatische blokkeringscode gebruiken van consentmanager in de versie als externe scriptcode:
In uw Angular-app moet u de that you copied and insert it into your main or page component into the function ngOnInit(){...}. Voorbeeld:
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
Om de te gebruiken consentmanager script in een Next.JS-website met server-side rendering, moet u de semi-automatische blokkeringscode gebruiken van consentmanager in de versie als externe scriptcode:
In uw Next.JS-app moet u de that you copied and insert it into your main or page component. The adjustments to be made are:
- Veranderen
<script ...>naar<Script ...>(hoofdletter S) - Attribuut toevoegen
strategy="afterInteractive"aan de<Script ...>
Voorbeeld pagina.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>
);
}Server-side rendering van ReactJS
Om de te gebruiken consentmanager script in een ReactJS-website met server-side rendering, moet u de semi-automatische blokkeringscode gebruiken van consentmanager in de versie als externe scriptcode:
Om onze code in uw React.JS-app te gebruiken, raden wij u aan de <Helmet> component om de CMP-code in te voegen door toe te voegen "helmet" en "react-helmet" als afhankelijkheid van uw project. Voorbeeldcomponent:
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-side rendering
Om de te gebruiken consentmanager script in een Vue.JS-website met server-side rendering, moet u de semi-automatische blokkeringscode gebruiken van consentmanager in de versie als externe scriptcode:
Om onze code in uw Vue.JS-app te gebruiken, raden we aan het component te gebruiken unHead van @unhead/vue (afhankelijkheden @unhead/vue en @vueuse/head). Voorbeeld:
<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>