Implementering med hjälp av 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 sköter sammanställningen av webbplatsens HTML-kod. Alternativet till detta kallas Server-Side Rendering. Här skapas HTML-koden redan på servern och endast ”hydreras” i webbläsaren.

AngularJS server-side rendering

För att kunna använda ConsentManagers skript på en AngularJS-webbplats med server-side rendering måste du använda ConsentManagers halvautomatiska blockeringskod i versionen som extern skriptkod:

Gå till Meny > CMP:er > Hämta koder för … webbplatser
Klicka på Halvautomatisk blockering
Klicka på Extern kod
Kopiera koden

I din Angular-app måste du ta isär koden <script> som du kopierade och infoga den i din huvud- eller sidkomponent i funktionen 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 Server-side Rendering

För att kunna använda ConsentManager-skriptet på en Next.JS-webbplats med server-side rendering måste du använda ConsentManagers halvautomatiska blockeringskod i versionen som extern skriptkod:

Gå till Meny > CMP:er > Hämta koder för … webbplatser
Klicka på Halvautomatisk blockering
Klicka på Extern kod
Kopiera koden

I din Next.JS-app måste du justera <script> som du kopierade något och infoga den i din huvud- eller sidkomponent. De justeringar som ska göras är:

Ändra <script ...> till <Script ...> (stort S)
Lägg till attribut strategy="afterInteractive" till <Script ...>

Exempel på 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

För att kunna använda ConsentManagers skript på en ReactJS-webbplats med server-side rendering måste du använda ConsentManagers halvautomatiska blockeringskod i versionen som extern skriptkod:

Gå till Meny > CMP:er > Hämta koder för … webbplatser
Klicka på Halvautomatisk blockering
Klicka på Extern kod
Kopiera koden

För att kunna använda vår kod i din React.JS-app rekommenderar vi att du använder <Helmet> komponenten för att infoga CMP-koden genom att lägga till "helmet" och "react-helmet" som beroende till ditt projekt. Exempel på 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;

Vue.JS server-side rendering

För att kunna använda ConsentManager-skriptet på en Vue.JS-webbplats med server-side rendering måste du använda ConsentManagers halvautomatiska blockeringskod i versionen som extern skriptkod:

Gå till Meny > CMP:er > Hämta koder för … webbplatser
Klicka på Halvautomatisk blockering
Klicka på Extern kod
Kopiera koden

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>

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!