Implementacja przy użyciu renderowania po stronie serwera
Nowoczesne frameworki, takie jak React, Angular lub Vue, zazwyczaj obsługują dwa tryby renderowania, aby wyświetlić witrynę. Typowym renderowaniem jest Client-Side Rendering, w którym komponent JavaScript zajmuje się składaniem kodu HTML witryny. Alternatywą jest Server-Side Rendering. W tym przypadku kod HTML jest już tworzony na serwerze i jest „hydratyzowany” tylko w przeglądarce.
Renderowanie po stronie serwera AngularJS
Aby skorzystać z consentmanager skrypt w witrynie AngularJS z renderowaniem po stronie serwera, należy użyć półautomatycznego kodu blokującego consentmanager w wersji jako zewnętrzny kod skryptu:
W swojej aplikacji Angular musisz zdemontować that you copied and insert it into your main or page component into the function ngOnInit(){...}, Przykład:
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);
}
}
}
Następne.JS Renderowanie po stronie serwera
Aby skorzystać z consentmanager skryptu w witrynie Next.JS z renderowaniem po stronie serwera, należy użyć półautomatycznego kodu blokującego consentmanager w wersji jako zewnętrzny kod skryptu:
W aplikacji Next.JS należy nieznacznie dostosować that you copied and insert it into your main or page component. The adjustments to be made are:
- zmiana
<script ...>do<Script ...>(wielka litera S) - Dodaj atrybut
strategy="afterInteractive"do<Script ...>
Przykładowa strona.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 Renderowanie po stronie serwera
Aby skorzystać z consentmanager skrypt w witrynie ReactJS z renderowaniem po stronie serwera, musisz użyć półautomatycznego kodu blokującego consentmanager w wersji jako zewnętrzny kod skryptu:
Aby użyć naszego kodu w swojej aplikacji React.JS, zalecamy użycie <Helmet> komponent do wstawiania kodu CMP poprzez dodanie "helmet" i "react-helmet" jako zależność od twojego projektu. Przykładowy komponent:
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;
Renderowanie po stronie serwera Vue.JS
Aby skorzystać z consentmanager skrypt w witrynie Vue.JS z renderowaniem po stronie serwera, należy użyć półautomatycznego kodu blokującego consentmanager w wersji jako zewnętrzny kod skryptu:
Aby użyć naszego kodu w swojej aplikacji Vue.JS, zalecamy użycie komponentu unHead od @unhead/vue (zależności @unhead/vue i @vueuse/head). Przykład:
<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>