Implementering med Server-Side Rendering
Moderna ramverk som React, Angular eller Vue stöder vanligtvis två renderingslägen för att visa webbplatsen. Den typiska renderingen är Client-Side Rendering, där JavaScript-komponenten tar hand om sammansättningen av webbplatsens HTML-kod. Alternativet till detta kallas Server-Side Rendering. Här är HTML-koden redan skapad på servern och endast "hydrerad" i webbläsaren.
AngularJS Server-Side Rendering
För att använda consentmanager skript på en AngularJS-webbplats med rendering på serversidan måste du använda den halvautomatiska blockeringskoden för consentmanager i versionen som extern skriptkod:
I din Angular-app måste du ta isär that you copied and insert it into your main or page component into the function ngOnInit(){...}. Exempel:
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 på serversidan
För att använda consentmanager skript på en Next.JS-webbplats med rendering på serversidan måste du använda den halvautomatiska blockeringskoden för consentmanager i versionen som extern skriptkod:
I din Next.JS-app måste du justera något that you copied and insert it into your main or page component. The adjustments to be made are:
- Ändra
<script ...>till<Script ...>(versaler S) - Lägg till attribut
strategy="afterInteractive"till<Script ...>
Exempel 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-rendering på serversidan
För att använda consentmanager skript på en ReactJS-webbplats med rendering på serversidan måste du använda den halvautomatiska blockeringskoden för consentmanager i versionen som extern skriptkod:
För att använda vår kod i din React.JS-app rekommenderar vi att du använder <Helmet> komponent för att infoga CMP-koden genom att lägga till "helmet" och "react-helmet" som beroende av ditt projekt. Exempelkomponent:
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-rendering på serversidan
För att använda consentmanager skript på en Vue.JS-webbplats med rendering på serversidan måste du använda den halvautomatiska blockeringskoden för consentmanager i versionen som extern skriptkod:
För att kunna använda vår kod i din Vue.JS-app rekommenderar vi att du använder komponenten unHead från @unhead/vue (beroenden @unhead/vue och @vueuse/head). Exempel:
<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>