Implementación mediante renderizado del lado del servidor

Los frameworks modernos como React, Angular o Vue suelen admitir dos modos de renderización para mostrar el sitio web. La renderización típica es la renderización del lado del cliente, en la que el componente JavaScript se encarga de ensamblar el código HTML del sitio web. La alternativa a esto se denomina renderización del lado del servidor. En este caso, el código HTML ya se crea en el servidor y solo se «hidrata» en el navegador.

Renderización del lado del servidor con AngularJS

Para utilizar el script de ConsentManager en un sitio web de AngularJS con renderizado del lado del servidor, debes utilizar el código de bloqueo semiautomático de ConsentManager en la versión de código de script externo:

Ve a Menú > CMP > Obtener códigos para… Sitios web
Haz clic en «Bloqueo semiautomático».
Haz clic en Código externo
Copia el código

En tu aplicación Angular, tendrás que descomponer el <script> que has copiado e insertarlo en tu componente principal o de página, dentro de la función 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);
    }
  }
}

Renderización del lado del servidor con Next.JS

Para utilizar el script de ConsentManager en un sitio web Next.JS con renderizado del lado del servidor, debes utilizar el código de bloqueo semiautomático de ConsentManager en la versión de código de script externo:

Ve a Menú > CMP > Obtener códigos para… Sitios web
Haz clic en «Bloqueo semiautomático».
Haz clic en Código externo
Copia el código

En tu aplicación Next.JS tendrás que ajustar ligeramente el <script> que has copiado e insertarlo en tu componente principal o de página. Los ajustes que hay que realizar son:

Cambia <script ...> a <Script ...> (S mayúscula)
Añade el atributo strategy="afterInteractive" al <Script ...>

Ejemplo de 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>
    );
}

Renderizado del lado del servidor con ReactJS

Para utilizar el script de ConsentManager en un sitio web ReactJS con renderizado del lado del servidor, debes utilizar el código de bloqueo semiautomático de ConsentManager en la versión de código de script externo:

Ve a Menú > CMP > Obtener códigos para… Sitios web
Haz clic en «Bloqueo semiautomático».
Haz clic en Código externo
Copia el código

Para utilizar nuestro código en tu aplicación React.JS, te recomendamos utilizar el <Helmet> componente para insertar el código CMP añadiendo "helmet" y "react-helmet" como dependencia a tu 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;

Renderización del lado del servidor con Vue.JS

Para utilizar el script de ConsentManager en un sitio web Vue.JS con renderizado del lado del servidor, debes utilizar el código de bloqueo semiautomático de ConsentManager en la versión de código de script externo:

Ve a Menú > CMP > Obtener códigos para… Sitios web
Haz clic en «Bloqueo semiautomático».
Haz clic en Código externo
Copia el código

Para utilizar nuestro código en tu aplicación Vue.JS, te recomendamos utilizar el componente unHead de @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>

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!