பயிற்சி1 ஜூன் 2026 | FlexyConsent

Next.js, Gatsby மற்றும் நிலையான தளங்களுக்கான குக்கீ ஒப்புதல்: டெவலப்பர் ஒருங்கிணைப்பு வழிகாட்டி

நிலையான தள ஒப்புதல் சிக்கல்

Next.js, Gatsby மற்றும் Nuxt.js போன்ற நவீன JavaScript கட்டமைப்புகள், வலைப்பக்கங்கள் எப்படி உருவாக்கப்பட்டு வழங்கப்படுகின்றன என்பதில் ஒரு முன்னுதாரண மாற்றத்தை அறிமுகப்படுத்தின. பக்கங்கள் build நேரத்தில் அல்லது சர்வரில் முன்-வழங்கப்படுகின்றன, பின்னர் கிளையன்ட்டில் ஹைட்ரேட் செய்யப்படுகின்றன. இது குக்கீ ஒப்புதலுக்கு ஒரு தனித்துவமான சவாலை உருவாக்குகிறது: எந்த கண்காணிப்பு ஸ்கிரிப்டுகளும் இயங்குவதற்கு முன் ஒப்புதல் பேனர் தயாராக இருக்க வேண்டும், ஆனால் பக்கமே ஏற்கனவே வழங்கப்பட்டு edge-இல் தற்காலிக சேமிப்பில் இருக்கலாம்.

பாரம்பரிய CMP-கள் சர்வர்-வழங்கப்பட்ட PHP அல்லது எளிய HTML பக்கங்களுக்காக வடிவமைக்கப்பட்டன, அங்கு ஆவணம் மேலிருந்து கீழாக நேர்கோட்டில் ஏற்றப்படுகிறது. கோட் பிரித்தல், சோம்பல் ஏற்றுதல் மற்றும் ஸ்ட்ரீமிங் சர்வர்-பக்க வழங்கல் கொண்ட கட்டமைப்பு உலகில், இந்த அனுமானங்கள் உடைகின்றன. இந்த சூழல்களில் ஒப்புதலைச் சரியாகப் பெறுவதற்கு வழங்கல் பைப்லைனைப் புரிந்துகொள்ள வேண்டும்.

நேரம் நீங்கள் நினைப்பதைவிட ஏன் முக்கியம்

ஒரு நிலையான HTML பக்கத்தில், மற்ற ஸ்கிரிப்டுகளுக்கு முன் <head>-இல் ஒரு CMP ஸ்கிரிப்டை வைப்பது நேரடியானது. Next.js App Router அல்லது Gatsby-இல், நிலைமை மிகவும் சிக்கலானது:

முன்-வழங்கப்பட்ட HTML முதலில் வருகிறது: உலாவி CDN அல்லது சர்வரிலிருந்து முழுமையான HTML-ஐப் பெறுகிறது. அந்த HTML-இல் ஏதேனும் இன்லைன் ஸ்கிரிப்டுகள் அல்லது மூன்றாம் தரப்பு டேக்குகள் உட்பொதிக்கப்பட்டிருந்தால், அவை உங்கள் ஒப்புதல் தர்க்கம் ஏற்றப்படுவதற்கு முன் இயங்கலாம்.
ஹைட்ரேஷன் இடைவெளி: HTML வரையப்பட்ட பிறகு React ஹைட்ரேஷன் நிகழ்கிறது. உங்கள் ஒப்புதல் கூறு ஒரு React கூறாக இருந்தால், ஹைட்ரேஷன் முடியும் வரை அது செயல்படும் நிலையில் இல்லை. இந்த இடைவெளியின் போது, Google டேக்குகள் அல்லது பகுப்பாய்வு ஸ்கிரிப்டுகள் ஒப்புதல் இல்லாமல் இயங்கலாம்.
Edge தற்காலிக சேமிப்பு சிக்கல்கள்: நீங்கள் ISR (Incremental Static Regeneration) அல்லது edge செயல்பாடுகளைப் பயன்படுத்தினால், HTML தற்காலிக சேமிப்பில் இருக்கும். கிளையன்ட்-பக்க பொறிமுறை இல்லாமல் தற்காலிக சேமிக்கப்பட்ட HTML-இல் ஒப்புதல் சார்ந்த தர்க்கத்தை நீங்கள் இயக்கமாக உட்செலுத்த முடியாது.

அடிப்படைக் கொள்கை இதுதான்: ஒப்புதல் கூறு மட்டத்தில் அல்ல, ஸ்கிரிப்ட் மட்டத்தில் நிறுவப்பட வேண்டும். ஒப்புதல் பேனரை வழங்கும் ஒரு React கூறு, ஹைட்ரேஷனுக்குப் பிறகே ஊடாடக்கூடியதாக மாறினால் மிகவும் தாமதமானது.

Next.js App Router ஒருங்கிணைப்பு

App Router கொண்ட Next.js 13+ ஸ்கிரிப்டுகளைக் கையாள ஒரு புதிய வழியை அறிமுகப்படுத்தியது. ஒப்புதல் ஒருங்கிணைப்புக்கான பரிந்துரைக்கப்பட்ட அணுகுமுறை இங்கே:

படி 1: ரூட் தளவமைப்பில் CMP ஸ்கிரிப்டை ஏற்றவும்

உங்கள் ரூட் layout.tsx-இல் beforeInteractive உத்தியுடன் Next.js Script கூறைப் பயன்படுத்துங்கள். இது ஹைட்ரேஷன் தொடங்குவதற்கு முன், ஆரம்ப HTML ஆவணத்தில் ஸ்கிரிப்டை உட்செலுத்தும்படி Next.js-க்குச் சொல்கிறது:

beforeInteractive உத்தி முக்கியமானது. இயல்புநிலை afterInteractive உத்தி ஹைட்ரேஷனுக்குப் பிறகு ஸ்கிரிப்டுகளை ஏற்றுகிறது, இது ஒப்புதலுக்கு மிகவும் தாமதம். beforeInteractive மூலம், CMP ஸ்கிரிப்ட் சர்வர்-வழங்கப்பட்ட HTML-இல் சேர்க்கப்பட்டு பக்கம் ஏற்றப்படும்போது இயங்குகிறது.

படி 2: Google டேக்குகளுக்கு முன் இயல்புநிலை ஒப்புதலை அமைக்கவும்

உங்கள் Google Tag Manager அல்லது gtag.js துணுக்குக்கு முன், இயல்புநிலை ஒப்புதல் நிலைகளை அமைக்கும் ஒரு இன்லைன் ஸ்கிரிப்டைச் சேர்க்கவும். CMP பேனர் தோன்றுவதற்கு முன் GTM ஏற்றப்பட்டாலும், அது நிராகரிக்கப்பட்ட இயல்புநிலைகளை மதிக்கும் என்பதை இது உறுதிசெய்கிறது:

இந்த இன்லைன் ஸ்கிரிப்ட் CMP மற்றும் GTM ஸ்கிரிப்டுகளுக்கு முன், உங்கள் ரூட் தளவமைப்பின் <head>-இல் வைக்கப்பட வேண்டும். Next.js-இல், இந்த நோக்கத்திற்காக உங்கள் தளவமைப்பின் <head> உறுப்புக்குள் ஒரு வழக்கமான <script> டேக்கைப் பயன்படுத்தலாம்.

படி 3: வழி மாற்றங்களைக் கையாளவும்

ஒற்றை-பக்க பயன்பாட்டு வழிசெலுத்தலில், CMP ஸ்கிரிப்ட் ஒருமுறை ஏற்றப்படுகிறது ஆனால் வழி மாற்றங்கள் முழு பக்க மீளேற்றத்தைத் தூண்டாது. உங்கள் CMP கிளையன்ட்-பக்க வழிசெலுத்தல்கள் முழுவதும் நிலைத்திருக்க வேண்டும். FlexyConsent இதைத் தானாகக் கையாளுகிறது — ஒருமுறை ஏற்றப்பட்டால், மீண்டும் தொடங்காமல் அனைத்து வழி மாற்றங்களிலும் செயலில் இருக்கும்.

Next.js Pages Router ஒருங்கிணைப்பு

இன்னும் Pages Router பயன்படுத்தும் திட்டங்களுக்கு, அணுகுமுறை ஒத்திருக்கிறது ஆனால் ரூட் தளவமைப்புக்குப் பதிலாக _document.tsx-ஐப் பயன்படுத்துகிறது. உங்கள் தனிப்பயன் Document வகுப்பின் <Head> கூறில் CMP ஸ்கிரிப்டை வைக்கவும். beforeInteractive உத்தி Pages Router-இல் அதே வழியில் வேலை செய்கிறது.

முக்கிய வேறுபாடு என்னவென்றால் _document.tsx சர்வரில் மட்டுமே வழங்கப்படுகிறது, எனவே இங்குள்ள எந்த ஒப்புதல் தர்க்கமும் ஆரம்ப HTML பேலோடில் இருக்க உத்தரவாதம் அளிக்கப்படுகிறது.

Gatsby நிலையான தள ஒருங்கிணைப்பு

Gatsby build நேரத்தில் முழுமையாக நிலையான HTML-ஐ உருவாக்குகிறது. கோரிக்கை நேரத்தில் சர்வர்-பக்க வழங்கல் இல்லை, இது சில அம்சங்களை எளிதாக்குகிறது ஆனால் மற்றவற்றைச் சிக்கலாக்குகிறது:

ஒவ்வொரு பக்கத்தின் <head>-இல் CMP ஸ்கிரிப்டை உட்செலுத்த gatsby-ssr.tsx-ஐப் பயன்படுத்துங்கள். onRenderBody API ஒவ்வொரு நிலையான HTML கோப்பிலும் இருக்கும் head-இல் ஸ்கிரிப்டுகளைச் சேர்க்க அனுமதிக்கிறது.
ஒப்புதலைச் சோம்பலாக ஏற்றும் Gatsby செருகுநிரல்களைத் தவிர்க்கவும்: சில சமூக செருகுநிரல்கள் ஒப்புதலை ஹைட்ரேஷனுக்குப் பிறகே ஏற்றப்படும் React கூறுகளில் சுற்றுகின்றன. இது முன்பு விவாதிக்கப்பட்ட நேர இடைவெளியை உருவாக்குகிறது.
ஒப்புதல் இயல்புநிலைகளை இன்லைனாக வைக்கவும்: இயல்புநிலை ஒப்புதல் நிலைகளை அமைக்கும் இன்லைன் ஸ்கிரிப்டைச் சேர்க்க gatsby-ssr.tsx-இல் setHeadComponents-ஐப் பயன்படுத்துங்கள். இந்த ஸ்கிரிப்ட் நிலையான HTML-இல் இருக்கும் மற்றும் உடனடியாக இயங்கும்.

Gatsby-இன் build-நேர அணுகுமுறை, உங்கள் 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 கூறு மூலம் இயக்கமாக உட்செலுத்தப்படக்கூடாது.

தளவமைப்பு மாற்றத்தைத் தவிர்த்தல்

ஒப்புதல் பேனர்கள் SEO தரவரிசைகளைப் பாதிக்கும் Core Web Vital ஆன Cumulative Layout Shift (CLS)-ஐ ஏற்படுத்துவதில் பெயர் பெற்றவை. பக்கம் வழங்கப்பட்ட பிறகு பேனர் பாப் இன் ஆகும்போது, அது உள்ளடக்கத்தைக் கீழே தள்ளுகிறது அல்லது எதிர்பாராதவிதமாக மேலடுக்குகிறது.

ஒப்புதல் பேனர்களிலிருந்து CLS-ஐ குறைக்கும் உத்திகள்:

கீழ்-நிலை பேனரைப் பயன்படுத்துங்கள்: viewport-இன் கீழே உள்ள பேனர்கள் பக்க உள்ளடக்கத்தை மாற்றாது. இது மிகவும் CLS-நட்பு அணுகுமுறை.
இடத்தை ஒதுக்குங்கள்: நீங்கள் ஒரு மேல் பேனரைப் பயன்படுத்த வேண்டியிருந்தால், பேனர் வழங்கப்படுவதற்கு முன் பக்க தளவமைப்பு அதைக் கணக்கில் கொள்ளும்படி உங்கள் CSS-இல் செங்குத்து இடத்தை ஒதுக்குங்கள்.
ஏற்றும்போது மோடல் மேலடுக்குகளைத் தவிர்க்கவும்: பக்கம் வழங்கப்பட்ட பிறகு தோன்றும் முழுத்திரை ஒப்புதல் சுவர்கள் உணரப்படும் தளவமைப்பு உறுதியின்மையை ஏற்படுத்துகின்றன. உங்களுக்கு ஒரு சுவர் தேவைப்பட்டால், அதை ஆரம்ப பக்க நிலையின் ஒரு பகுதியாக வழங்குங்கள்.
head-இல் CMP-ஐ ஒத்திசைவாக ஏற்றவும்: CMP head-இல் வழங்கல்-தடுக்கும் ஸ்கிரிப்டாக ஏற்றப்படும்போது, பேனர் பின்னர் பாப் இன் ஆகாமல் ஆரம்ப வரைதலின் ஒரு பகுதியாகத் தோன்றலாம்.

FlexyConsent-இன் கட்டமைப்பு-சார்பற்ற அணுகுமுறை

FlexyConsent, கூறு மட்டத்தில் அல்லாமல் ஸ்கிரிப்ட் மட்டத்தில் இயங்குவதன் மூலம் எந்த கட்டமைப்புடனும் — அல்லது கட்டமைப்பு இல்லாமலும் — வேலை செய்ய வடிவமைக்கப்பட்டது. இது ஏன் முக்கியம் என்பது இங்கே:

ஒற்றை அசின்க் ஸ்கிரிப்ட் டேக்: <head>-இல் ஒரு <script> டேக் மட்டுமே தேவை. நிறுவ npm தொகுப்புகள் இல்லை, கட்டமைப்பு-குறிப்பிட்ட ராப்பர்கள் இல்லை, build உள்ளமைவு இல்லை.
ஒப்புதல் இயல்புநிலைகள் உடனடியாக இயங்குகின்றன: எந்த கால்பேக் அல்லது DOM கையாளுதலுக்கும் முன், ஸ்கிரிப்ட் Consent Mode V2 இயல்புநிலைகளை அதன் முதல் செயலாக அமைக்கிறது. இதன் பொருள் Google டேக்குகள் முதல் மில்லிவினாடியிலிருந்தே ஒப்புதலை மதிக்கின்றன.
DOM சார்பு இல்லை: ஒப்புதல் தர்க்கம் React, Vue அல்லது Svelte ஹைட்ரேட் செய்ய காத்திருக்காது. இது கட்டமைப்பு வாழ்க்கை சுழற்சியிலிருந்து சுயாதீனமாக இயங்குகிறது.
SSG, SSR, ISR மற்றும் CSR-உடன் வேலை செய்கிறது: இது ஒரு எளிய ஸ்கிரிப்ட் என்பதால், பக்கம் நிலையாக உருவாக்கப்பட்டதா, சர்வர்-வழங்கப்பட்டதா, படிப்படியாக மீளுருவாக்கப்பட்டதா அல்லது கிளையன்ட்-பக்கம் வழங்கப்பட்டதா என்பதைப் பொருட்படுத்தாமல் இது ஒரே மாதிரியாகச் செயல்படுகிறது.

டெவலப்பர் குறிப்பு: சரியான CMP ஒருங்கிணைப்புக்கான எளிய சோதனை, உங்கள் உலாவியின் Network தாவலைத் திறந்து, Google டொமைன்களால் வடிகட்டி, பக்கத்தை மீளேற்றுவது. கன்சோலில் ஒப்புதல் இயல்புநிலை கட்டளை தோன்றுவதற்கு முன் எந்த Google கோரிக்கைகளும் இயங்கக்கூடாது. அவை இயங்கினால், உங்கள் CMP மிகவும் தாமதமாக ஏற்றப்படுகிறது.

FlexyConsent-இன் இலவசத் திட்டம் வரம்பற்ற பக்கப் பார்வைகளை ஆதரிக்கிறது மற்றும் Next.js, Gatsby, Nuxt, Astro, SvelteKit, Remix மற்றும் எளிய HTML-உடன் வேலை செய்கிறது. ஒருங்கிணைப்பு அனைத்திலும் ஒரே மாதிரியாக இருக்கிறது: சரியாக வைக்கப்பட்ட ஒரு ஸ்கிரிப்ட் டேக்.