Оқу құралы1 маусым, 2026 | FlexyConsent

Next.js, Gatsby және статикалық сайттар үшін cookie келісімі: әзірлеушілерге арналған интеграция нұсқаулығы

Статикалық сайттардағы келісім мәселесі

Next.js, Gatsby және Nuxt.js сияқты заманауи JavaScript фреймворктары веб-беттерді құру және жеткізу тәсілін түбегейлі өзгертті. Беттер құру кезінде немесе серверде алдын ала рендерленеді, содан кейін клиентте гидратацияланады. Бұл cookie келісімі үшін ерекше қиындық туғызады: келісім баннері кез келген трекинг скрипттері орындалғанға дейін дайын болуы тиіс, бірақ беттің өзі қазірдің өзінде рендерленген және edge-де кэштеулі болуы мүмкін.

Дәстүрлі CMP-лер серверде рендерленетін PHP немесе құжаты жоғарыдан төменге дейін сызықтық жүктелетін қарапайым HTML беттер үшін жасалған. Code splitting, lazy loading және streaming server-side rendering қолданылатын фреймворктар әлемінде бұл болжамдар бұзылады. Мұндай ортада келісімді дұрыс ұйымдастыру үшін рендерлеу конвейерін түсіну қажет.

Уақыттың маңызы сіз ойлағаннан да жоғары

Кәдімгі HTML бетінде CMP скриптін басқа скрипттерден бұрын <head> бөлігіне қою оңай. Next.js App Router немесе Gatsby-де жағдай күрделірек:

Негізгі қағида мынадай: келісім компонент деңгейінде емес, скрипт деңгейінде орнатылуы тиіс. Келісім баннерін рендерлейтін React компоненті, егер ол тек гидратациядан кейін интерактивті болса, тым кеш болады.

Next.js App Router интеграциясы

App Router-і бар Next.js 13+ скрипттерді басқарудың жаңа тәсілін енгізді. Келісімді интеграциялаудың ұсынылатын тәсілі төмендегідей:

1-қадам: CMP скриптін түбірлік layout-қа жүктеу

Түбірлік layout.tsx ішінде beforeInteractive стратегиясымен Next.js Script компонентін қолданыңыз. Бұл Next.js-ке скриптті бастапқы HTML құжатына, гидратация басталғанға дейін енгізуді бұйырады:

beforeInteractive стратегиясы шешуші мәнге ие. Әдепкі afterInteractive стратегиясы скрипттерді гидратациядан кейін жүктейді, бұл келісім үшін тым кеш. beforeInteractive көмегімен CMP скрипті серверде рендерленген HTML-ге қосылады және бет жүктелген кезде орындалады.

2-қадам: Google тегтеріне дейін әдепкі келісім күйін орнату

Google Tag Manager немесе gtag.js үзіндісіне дейін әдепкі келісім күйлерін орнататын inline скрипт қосыңыз. Бұл GTM CMP баннері пайда болғанға дейін жүктелсе де, ол бас тарту бойынша әдепкі мәндерді сақтайтынын қамтамасыз етеді:

Бұл inline скрипт түбірлік layout-тың <head> бөлігіне, CMP және GTM скрипттерінен бұрын орналастырылуы тиіс. Next.js-те бұл үшін layout-тың <head> элементінің ішінде кәдімгі <script> тегін қолдана аласыз.

3-қадам: Маршруттардың ауысуын өңдеу

Single-page application навигациясында CMP скрипті бір рет жүктеледі, бірақ маршруттардың ауысуы толық бет қайта жүктелуін тудырмайды. Сіздің CMP клиенттік навигациялар арасында сақталуы тиіс. FlexyConsent мұны автоматты түрде орындайды — бір рет жүктелгеннен кейін ол барлық маршрут ауысуларында қайта инициализациясыз белсенді болып қалады.

Next.js Pages Router интеграциясы

Pages Router қолданатын жобалар үшін тәсіл ұқсас, бірақ түбірлік layout орнына _document.tsx қолданылады. CMP скриптін арнайы Document класының <Head> компонентіне орналастырыңыз. beforeInteractive стратегиясы Pages Router-де де дәл солай жұмыс істейді.

Негізгі айырмашылық — _document.tsx тек серверде рендерленеді, сондықтан мұндағы кез келген келісім логикасы бастапқы HTML жүктемесінде міндетті түрде болады.

Gatsby статикалық сайт интеграциясы

Gatsby құру кезінде толық статикалық HTML жасайды. Сұраныс кезінде серверлік рендерлеу жоқ, бұл кейбір аспектілерді жеңілдетеді, бірақ басқаларын қиындатады:

Gatsby-дің құру уақытына негізделген тәсілі CDN-дегі әр HTML файлына келісім скрипті кіретінін білдіреді. Бұл шын мәнінде тамаша — істен шығатын немесе дұрыс кэштелмей��ін серверлік логика жоқ.

Nuxt.js ерекшеліктері

Nuxt.js (Vue-негізді) өз үлгілеріне ие. Nuxt 3-те CMP скриптін ғаламдық түрде қосу үшін useHead composable-ін немесе nuxt.config.ts ішіндегі app head конфигурациясын қолданыңыз. Nuxt body: false опциясын (скрипттерді head бөлігіне орналастырады) және блоктамайтын жүктеу үшін async атрибутын қолдайды.

Nuxt-тің серверлік рендерлеу режимі үшін де сол қағида қолданылады: CMP скрипті бастапқы HTML жауапта болуы тиіс, Vue компоненті mount болғаннан кейін динамикалық түрде енгізілмеуі керек.

Layout shift-ті болдырмау

Келісім баннерлері Cumulative Layout Shift (CLS) үшін жиі кінәлі, бұл SEO рейтингтеріне әсер ететін Core Web Vital. Баннер бет рендерленгеннен кейін пайда болғанда, ол контентті төмен итереді немесе күтпеген жерден үстіне шығады.

Келісім баннерлерінен CLS-ті азайту стратегиялары:

FlexyConsent-тің фреймворктан тәуелсіз тәсілі

FlexyConsent кез келген фреймворкпен — тіпті фреймворксіз де — жұмыс істеу үшін компонент деңгейінде емес, скрипт деңгейінде жұмыс істейтіндей етіп жасалған. Бұл неге маңызды:

Әзірлеушіге кеңес: Дұрыс CMP интеграциясын тексерудің ең қарапайым тәсілі — браузердің Network қойындысын ашып, Google домендері бойынша сүзгіден өткізіп, бетті қайта жүктеу. Келісімнің әдепкі командасы консольде пайда болғанға дейін ешқандай Google сұранысы жіберілмеуі тиіс. Егер жіберілсе, CMP тым кеш жүктеліп жатыр.

FlexyConsent-тің тегін тарифі шексіз pageview-ді қолдайды және Next.js, Gatsby, Nuxt, Astro, SvelteKit, Remix және қарапайым HTML-пен жұмыс істейді. Интеграция олардың барлығында бірдей: дұрыс орналастырылған бір script тегі.

← Блaderegistrdelays delays Барлығын оқу →