Implementación mediante renderizado del lado del servidor
Los frameworks modernos como React, Angular o Vue suelen admitir dos modos de renderizado para mostrar el sitio web. El renderizado típico es el del lado del cliente, donde el componente JavaScript se encarga de ensamblar el código HTML del sitio web. La alternativa a esto se denomina renderizado del lado del servidor. En este caso, el código HTML ya se crea en el servidor y solo se "hidrata" en el navegador.
Representación del lado del servidor de AngularJS
Para usar el consentmanager script en un sitio web AngularJS con renderizado del lado del servidor, debe usar el código de bloqueo semiautomático de consentmanager en la versión como código de script externo:
En su aplicación Angular, deberá desmontar el that you copied and insert it into your main or page component into the function ngOnInit(){...}. Ejemplo:
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);
}
}
}
Representación del lado del servidor de Next.JS
Para usar el consentmanager script en un sitio web Next.JS con renderizado del lado del servidor, debe usar el código de bloqueo semiautomático de consentmanager en la versión como código de script externo:
En su aplicación Next.JS necesitará ajustar ligeramente el that you copied and insert it into your main or page component. The adjustments to be made are:
- Cambiar
<script ...>a<Script ...>(S mayúscula) - Añadir atributo
strategy="afterInteractive"En el correo electrónico “Su Cuenta de Usuario en su Nuevo Sistema XNUMXCX”.<Script ...>
Página de ejemplo .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>
);
}Representación del lado del servidor de ReactJS
Para usar el consentmanager script en un sitio web ReactJS con renderizado del lado del servidor, debe usar el código de bloqueo semiautomático de consentmanager en la versión como código de script externo:
Para poder usar nuestro código en su aplicación React.JS, le recomendamos utilizar el <Helmet> componente para insertar el código CMP agregando "helmet" y "react-helmet" Como dependencia de su proyecto. Ejemplo de componente:
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;
Representación del lado del servidor de Vue.JS
Para usar el consentmanager script en un sitio web Vue.JS con renderizado del lado del servidor, debe usar el código de bloqueo semiautomático de consentmanager en la versión como código de script externo:
Para poder utilizar nuestro código en su aplicación Vue.JS, le recomendamos utilizar el componente unHead piadoso @unhead/vue (dependencias @unhead/vue y @vueuse/head) Ejemplo:
<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>