Skrypty zewnętrzne — analityka, tagi i CSP

Analityka, tag managery, widgety czatu, banery zgody - to należy do Twojej aplikacji, nie do CMS-a.

Powód to własność. Tag skryptu to wykonywalny kod na każdej stronie; przechodzi review, ma wersje i jest deployowany jak reszta aplikacji. Wrzucenie go w edytowalne pole zamienia "zmień nagłówek" i "uruchom dowolny JavaScript na produkcji" w to samo uprawnienie.

Analityka: użyj oficjalnych komponentów

Do Google Analytics i Tag Managera nie klep tagu skryptu ręcznie. @next/third-parties dostarcza komponenty, które ładują skrypt i snippet inicjalizujący, z właściwą strategią:

// app/[[...path]]/layout.tsx
import { GoogleAnalytics, GoogleTagManager } from "@next/third-parties/google";

const gaId = process.env.NEXT_PUBLIC_GA_ID?.trim();
const gtmId = process.env.NEXT_PUBLIC_GTM_ID?.trim();

// ...wewnątrz <body>
{gtmId ? <GoogleTagManager gtmId={gtmId} /> : null}
{gaId ? <GoogleAnalytics gaId={gaId} /> : null}

Samo <Script src="...gtag/js?id=..."> ładuje bibliotekę, ale nigdy jej nie konfiguruje - potrzebujesz jeszcze inline'owego gtag('config', id). To dokładnie ten rodzaj półdziałającej konfiguracji, przed którą te komponenty mają chronić.

Warunek na zmiennej środowiskowej to nie uprzejmość. Trzyma analitykę poza deploymentami preview i lokalnym developmentem, żeby Twoje liczby nie były Twoim własnym klikaniem.

Cała reszta: next/script

Widgety czatu, dymki wsparcia, osadzenia social media i jednorazowe tagi dostawców nie mają oficjalnego komponentu. Te idą przez next/script:

import Script from "next/script";

<Script src="https://widget.example.com/embed.js" strategy="lazyOnload" />

Wybór strategii

Domyślna rzadko jest tą właściwą:

afterInteractive - domyślna i poprawna dla analityki oraz tag managerów. Ładuje się, gdy strona jest interaktywna.
lazyOnload - dla wszystkiego, czego pierwszy ekran nie potrzebuje: czaty, dymki wsparcia, osadzenia social media.
beforeInteractive - tylko dla skryptów, które muszą zadziałać przed hydracją, jak bramka zgody decydująca, czy inne skrypty w ogóle mogą się załadować. Blokuje, więc traktuj ją jako ostateczność.

Widget czatu na afterInteractive konkuruje z Twoją własną hydracją o główny wątek. To najczęstszy sposób, w jaki szybki serwis cmssy staje się wolny - strony są statyczne, ale ładunek zewnętrzny już nie.

CSP je zablokuje

To ta część, na której ludzie się wykładają.

createCmssyProxy nakłada Content Security Policy, żeby panel cmssy mógł osadzić Twój serwis w edytorze. Ta polityka rządzi każdym skryptem ładowanym przez stronę - więc świeżo dodany skrypt zewnętrzny może zostać zablokowany przez nagłówek, którego nie pisałeś i możesz nie wiedzieć, że istnieje.

Objaw jest charakterystyczny: skrypt nigdy się nie uruchamia, w zakładce sieci nie ma błędu, a konsola przeglądarki pokazuje naruszenie CSP z nazwą zablokowanego originu. Jeśli tag "po prostu nie odpala" na produkcji, a lokalnie działa, sprawdź konsolę, zanim sprawdzisz tag managera.

Dodając skrypt z nowego originu, rozszerz politykę, żeby go dopuścić.

Zgoda

Jeśli bramkujesz skrypty zgodą, bramka też jest kodem aplikacji i musi zadziałać pierwsza. Umieść logikę zgody na beforeInteractive, a bramkowane skrypty ładuj warunkowo później.

Nie bramkuj, renderując baner zgody jako blok CMS-a. Redaktor odpublikowujący ten blok usunąłby po cichu mechanizm, a nie śledzenie - i serwis dalej zbierałby dane, nie mając na ekranie niczego, co pyta o zgodę.

Co zamiast tego należy do CMS-a

Nie skrypt - konfiguracja. Identyfikator pomiaru, flaga kampanii, przełącznik funkcji to wartości, a wartości można bezpiecznie edytować. Odczytaj je z konfiguracji serwisu albo z pól własnych strony i przekaż do skryptu, który należy do Twojej aplikacji.

Dzięki temu edytowalna powierzchnia to "który identyfikator", a nie "który kod".

Następne kroki

Route'y i strony - middleware ustawiające CSP.
SEO - metadane, które są treścią, a nie kodem.
Branding - wartości na poziomie serwisu warte edycji.