Implementation using Server-Side Rendering
Modern frameworks like React, Angular or Vue usually support two rendering modes to display the website. The typical rendering is Client-Side Rendering, where the JavaScript component takes care of assembling the website's HTML Code. The alternative to this is called Server-Side Rendering. Here the HTML code is already created on the server and only "hydrated" in the browser.
AngularJS Server-Side Rendering
In order to use the consentmanager script in an AngularJS website with server-side rendering, you must use the semi-automatic blocking code of consentmanager in the version as external script code:
In your Angular App you will need to disassemble the <script> that you copied and insert it into your main or page component into the function ngOnInit(){...}. Example:
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
In order to use the consentmanager script in a Next.JS website with server-side rendering, you must use the semi-automatic blocking code of consentmanager in the version as external script code:
In your Next.JS App you will need to slightly adjust the <script> that you copied and insert it into your main or page component. The adjustments to be made are:
- Change
<script ...>to<Script ...>(uppercase S) - Add attribute
strategy="afterInteractive"to the<Script ...>
Example 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>
);
}ReactJS Server-side Rendering
In order to use the consentmanager script in a ReactJS website with server-side rendering, you must use the semi-automatic blocking code of consentmanager in the version as external script code:
In order to use our code in your React.JS App, we recommend using the <Helmet> component to insert the CMP-code by adding "helmet" and "react-helmet" as dependency to your project. Example component:
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
In order to use the consentmanager script in a Vue.JS website with server-side rendering, you must use the semi-automatic blocking code of consentmanager in the version as external script code:
In order to use our code in your Vue.JS App, we recommend using the component unHead from @unhead/vue (dependencies @unhead/vue and @vueuse/head). Example:
<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>