Mengelola Izin Cookie Di Next Js Menggunakan Google Tag Manager
Sebagian besar situs web saat ini memerlukan sistem persetujuan cookie untuk mematuhi peraturan Eropa GDPR (dan lainnya). Pada dasarnya, ini berarti cookie tidak dapat disimpan di komputer pengguna tanpa izin pengguna. Selain itu, Anda tidak dapat mengizinkan layanan lain yang aktif di situs Anda (seperti Analytics atau Periklanan) untuk menyimpan cookie di domain Anda.
Artikel ini menunjukkan cara mendapatkan Persetujuan Cookie dari pengguna di project Next.js dan menanganinya dengan ikhtisar persetujuan bawaan Google Tag Manager.
Prasyarat
Untuk mengikuti project ini, Anda memerlukan yang berikut:
- Akun Google TagManager dan container untuk mengaktifkan ikhtisar persetujuan (menjelaskan cara mengaktifkannya)
- Layanan yang menerapkan cookie yang disetting menggunakan Google Tag Manager (Sebagian besar layanan Google menggunakan Google Analytics karena memiliki pemeriksaan izin otomatis, tetapi layanan lain mudah diterapkan)
- project Next.js dasar yang mengimplementasikan banner untuk persetujuan cookie
- Pengetahuan dasar tentang layout Next.js untuk digunakan
Membatasi pembahasan
Buat contoh dasar di mana pengguna dapat menerima atau menolak cookie. Anda tidak harus memilih ukuran artikel atau cookie untuk diterima dan cookie untuk ditolak. Namun, memperluas contoh ini ke solusi yang lebih lengkap adalah tugas yang mudah.
bagaimana cara kerjanya
Dalam project Next.js, halaman berisi wadah Tag Manager yang merupakan titik masuk untuk semua kode pemantauan (analisis, periklanan, pemasaran ulang, dll.). Tag Manager "mengeksekusi" kode dengan persetujuan pengguna. Buat banner agar pengguna dapat memberi (atau menolak) kepada kami. lebih tepatnya, persetujuan dipertahankan dan dikirim ke Tag Manager pada setiap permintaan halaman, sehingga tag diluncurkan dengan benar dan cookie ditetapkan berdasarkan pilihan pengguna.
Seperti yang disebutkan bahwa ada lebih banyak persetujuan dan lebih banyak jenis cookie, TagManager mendukung:
- ad_storage (cookie yang melacak iklan)
- analytics_storage (statistik pelacakan cookie)
- functionality_storage (cookie yang menyimpan data untuk digunakan di situs Anda, seperti bahasa)
- personalization_storage (cookie yang menyesuaikan pengalaman pengguna situs Anda berdasarkan preferensi Anda)
- security_storage (cookie yang menyimpan informasi login, kunci, dll.)
Beberapa cookie yang diperlukan diaktifkan secara default. Ini diperlukan agar situs berfungsi (misalnya, fitur keranjang e-niaga).
Layanan Google (seperti Analytics dan Iklan) memiliki pemeriksaan izin bawaan. Untuk layanan lain, Anda perlu menentukan persetujuan yang diperlukan agar dapat berfungsi (lebih lanjut tentang ini nanti).
Dalam contoh ini, kami akan menerapkan Google Analytics dengan persetujuan bawaan.
Setelan Tag Manager
Masuk ke akun Google Tag Manager Anda, buat akun baru dan penampung baru, beri nama, dan pilih web sebagai platform target Anda.
Aktifkan ringkasan izin di Tag Manager, buka Administrasi-> Setelan Penampung.
Buat tag baru untuk memproses Google Analytics (memerlukan akun aktif Google Analytics GA4 dan ID Measurement): Buka Tag, klik tombol Baru, klik Konfigurasi Tag Dan tambahkan Google Analytics: jenis tag konfigurasi GA4. Tambahkan dan konfigurasikan ID pengukuran (yang bisa Anda dapatkan dari konfigurasi Google Analytics), gulir ke bawah ke Setelan Izin dan pilih Tidak diperlukan izin tambahan. Seperti yang Anda lihat, GA4 memiliki pemeriksaan izin bawaan yang diaktifkan untuk ad_storage dan analytics_storage. Ini berarti Anda harus memberikan dua persetujuan ini kepada Tag Manager untuk mengaktifkan penyimpanan dan pelacakan cookie dari Google Analytics.
Selanjutnya, Anda perlu mengkonfigurasi Firing Trigger. Agar Analytics diluncurkan di semua halaman Next.js, Anda harus memicu semua perubahan halaman dan riwayat. Klik Pilih trigger untuk meluncurkan tag ini.. Pilih Semua Halaman, klik tombol + untuk menambahkan trigger lain, lalu klik tanda + lagi untuk menyesuaikan Buat trigger. Beri nama Nextjs page change Klik Pilih jenis trigger untuk memulai penyiapan..Pilih dan simpan perubahan riwayat. Akhirnya, struktur tag terlihat seperti ini:
Jangan lupa untuk mengirimkan dan mempublikasikan ruang kerja Anda.
Buat project Next.js baru
Anda sekarang dapat membuat project Next.js baru dan menginstal dependensi yang diperlukan. Gunakan cookie-next untuk memproses cookie dan Tailwind untuk mengatur style popup persetujuan.
Buat project baru.
npx create-next-app consent
Tambahkan modul cookie-berikutnya:
npm install --save cookies-next
,Ikuti panduan resmi untuk menginstal dan mengkonfigurasi Tailwind CSS.
Pada titik ini, menjalankan aplikasi menggunakan npm run devand menuju ke http://localhost:3000 akan memunculkan layar beranda Next.js dasar.
Tambahkan kode Tag Manager ke project Anda
Pertama, Anda perlu menambahkan kode Tag Manager ke project Anda. Untuk melakukan ini, gunakan API next/script API (https://nextjs.org/docs/api-reference/next/script). Dapatkan kode JavaScript dari Admin Tag Manager-> Install Google Tag Manager (Anda harus mendapatkan apa yang ada dalam pikiran Anda).
Kode yang disalin akan ditambahkan ke _app.js dan dijalankan di setiap halaman project.
import '../styles/globals.css';
import Head from 'next/head';
import Script from 'next/script';
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>
<Script
id="gtag"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PR7FDL7');`,
}}
/>
<Component {...pageProps} />
</>
);
}
export default MyApp;
Untuk menguji apakah semuanya sudah benar, Anda dapat menggunakan fitur pratinjau Tag Manager. Buka ruang kerja yang saat ini Anda gunakan di Tag Manager dan klik tombol Pratinjau. Anda akan diminta untuk menguji URL dan memasukkan http://localhost:3000 untuk terhubung. Jika halaman baru terbuka di situs lokal Anda dan semuanya dikonfigurasi, halaman ini akan menampilkan pemberitahuan bahwa Tag Manager terhubung.
Anda juga dapat melihat perenderan halaman dan alur kerja peluncuran tag di halaman Tag Assistant, karena Tag Manager meluncurkan tag GA4 dengan benar (diluncurkan dengan Container Loaded).
Tambahkan popup persetujuan ke semua halaman
Anda perlu menambahkan popup persetujuan ke setiap halaman project Anda. Pop-up termasuk tombol tutup, tombol untuk menolak cookie, dan tombol untuk menerima cookie. Berdasarkan pilihan pengguna, cookie persetujuan disimpan secara istimewa di komputer pengguna. Popup hanya akan terbuka jika cookie konfigurasi tidak ada. Tombol tutup tidak menyimpan cookie, sehingga popup akan muncul kembali.
Ada banyak strategi untuk membuat popup dengan fitur-fitur ini. Gunakan fitur layout Nextjs dan komponen popup itu sendiri. Untuk informasi lebih lanjut tentang layout Next.js.
Pertama, buat komponen baru (di component/consent.js).
import React, { useEffect, useState } from 'react';
import { setCookie, hasCookie } from 'cookies-next';
function Consent() {
const [consent, setConsent] = useState(true);
useEffect(() => {
setConsent(hasCookie('localConsent'));
}, []);
const acceptCookie = () => {
setConsent(true);
setCookie('localConsent', 'true', { maxAge: 60 * 60 * 24 * 365 });
console.log('accepring cookies');
};
const closeP = () => {
setConsent(true);
console.log('closing');
};
const denyCookie = () => {
setConsent(true);
setCookie('localConsent', 'false', { maxAge: 60 * 60 * 24 * 365 });
console.log('denying cookie');
};
if (consent === true) {
return null;
}
return (
<div
className={`absolute bottom-3 w-[90%] left-3 p-3 rounded-md bg-slate-200 ${
consent ? 'hidden' : ''
}`}
>
This Site use cookie, please accept them if you want
<div className="flex align-middle justify-between">
<button
onClick={(e) => {
closeP();
}}
>
Close
</button>
<button
onClick={(e) => denyCookie()}
className="p-2 bg-red-400 rounded-md"
>
Deny All
</button>
<button
onClick={() => {
acceptCookie();
}}
className="p-2 bg-green-400 rounded-md"
>
Accept All
</button>
</div>
</div>
);
}
export default Consent;
Ini adalah div dasar yang benar-benar ditempatkan di bagian bawah halaman dengan tiga tombol, banner ditutup (disembunyikan) setiap kali Anda mengklik tombol, dan dengan tombol setuju dan tolak Cookie ditetapkan (nama dan durasi localConsent). Itu dapat memiliki nilai benar atau salah. Jika pengguna hanya memiliki cookie, banner tidak akan muncul kembali. Nilai cookie nantinya akan digunakan untuk mengaktifkan (atau menonaktifkan) arti dari Tag Manager.
Komponen consent.js ditambahkan ke halaman menggunakan Next.js Layout, dan file bernama layout.js ditambahkan di dalam folder komponen.
import Consent from './consent';
export default function Layout({ children }) {
return (
<>
<main>{children}</main>
<Consent />
</>
);
}
Kemudian implementasikan menggunakan app.js.
import '../styles/globals.css';
import Head from 'next/head';
import Script from 'next/script';
import Layout from '../components/layout';
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>
<Script
id="gtag"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');`,
}}
/>
<Layout>
<Component {...pageProps} />
</Layout>
</>
);
}
export default MyApp;
Dengan cara ini, setiap halaman akan berisi banner persetujuan.
Pada titik ini, ketika Anda menjalankan project, Anda akan melihat banner persetujuan di bagian bawah halaman, klik salah satu tombol untuk menyembunyikan banner, dan setel localConsentCookie (jika Anda mengeklik Setujui atau Tolak). Jika cookie localConsent ada, banner tidak akan muncul kembali, tetapi jika Anda (secara manual) menghapus cookie, banner akan muncul kembali.
Seperti yang mungkin Anda perhatikan, kami belum menerapkan mode izin, jadi ada dua cookie lagi yang disetel oleh Google Analytics (melalui Tag Manager).
Implementasi mode persetujuan
Sekarang setelah semua bagian telah ditempatkan, Anda dapat mulai menautkannya. Seperti yang didokumentasikan oleh Google, mode izin selalu dimulai dalam status ditolak dan harus diperbarui menggunakan setelan pengguna yang disimpan secara lokal. Pemeriksaan ini perlu dilakukan di setiap halaman situs, jadi Anda harus mengubah _app.js lagi untuk menambahkan nilai izin default ke kode Tag Manager tolak.
gtag(‘consent’, ‘default’, {
‘ad_storage’: ‘denied’,
‘analytics_storage’: ‘denied’
});
Jadi terlihat seperti ini:
import '../styles/globals.css';
import Head from 'next/head';
import Script from 'next/script';
import Layout from '../components/layout';
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>
<Script
id="gtag"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'analytics_storage': 'denied'
});
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PR7FDL7');`,
}}
/>
<Layout>
<Component {...pageProps} />
</Layout>
</>
);
}
export default MyApp;
Jika Anda menghapus cookie localConsent dan menguji project menggunakan Tag Manager Tag Assistant, Anda akan melihat bahwa status izin dari dua cakupan yang ditentukan ditolak, nilai default dikirim, dan belum diperbarui.
klik Saya Setuju Sekarang tidak melakukan apa pun di sisi Tag Manager. Juga, jika Anda menyetel cookie localConsent ke true dan memuat ulang halaman, persetujuan Anda akan ditolak dan tidak ada pembaruan yang akan terdeteksi. Anda perlu menemukan cara untuk memberi tahu Tag Manager tentang pembaruan saat tombol diklik dan saat halaman dimuat setelah izin diberikan.
Mengklik tombol (Terima) akan menambahkan pembaruan gtag ke fungsi terima di komponen content.js.
import React, { useEffect, useState } from 'react';
import { setCookie, hasCookie } from 'cookies-next';
function Consent() {
const [consent, setConsent] = useState(true);
useEffect(() => {
setConsent(hasCookie('localConsent'));
}, []);
const acceptCookie = () => {
setConsent(true);
setCookie('localConsent', 'true', { maxAge: 60 * 60 * 24 * 365 });
gtag('consent', 'update', {
ad_storage: 'granted',
analytics_storage: 'granted',
});
console.log('accepting cookies');
};
const closeP = () => {
setConsent(true);
console.log('closing');
};
const denyCookie = () => {
setConsent(true);
setCookie('localConsent', 'false', { maxAge: 60 * 60 * 24 * 365 });
console.log('denying cookie');
};
if (consent === true) {
return null;
}
return (
<div
className={`absolute bottom-3 w-[90%] left-3 p-3 rounded-md bg-slate-200 ${
consent ? 'hidden' : ''
}`}
>
This Site use cookie, please accept them if you want
<div className="flex align-middle justify-between">
<button
onClick={(e) => {
closeP();
}}
>
Close
</button>
<button
onClick={(e) => denyCookie()}
className="p-2 bg-red-400 rounded-md"
>
Deny All
</button>
<button
onClick={() => {
acceptCookie();
}}
className="p-2 bg-green-400 rounded-md"
>
Accept All
</button>
</div>
</div>
);
}
export default Consent;
Oleh karena itu, saat tombol diklik, Tag Manager untuk add_storage dan penyimpanan analitik disetel untuk memberikan izin. Jika Anda menghapus semua cookie localhost dan menguji lagi dengan Tag Assistant, Anda akan melihat bahwa saat Anda mengklik Setuju, semua peristiwa persetujuan baru yang mendeteksi pembaruan diaktifkan. Anda juga akan melihat bahwa salah satu cookie GA4 tidak disetel kecuali Anda mengklik Setuju. Cookie itu adalah cookie yang melacak Anda. Jika Anda mengklik Tolak, GA tidak akan mengirimkan cookie pelacakan karena persetujuan Anda tidak akan diperbarui.
Jika Anda memuat ulang halaman atau membuka halaman lain, pe rsetujuan akan diinisialisasi ulang dan ditolak, jadi untuk menyimpannya selama navigasi, baca cookie dan kirim acara pembaruan gtag jika perlu, _app Anda perlu mengimplementasikan pembaruan di file .js Anda:
import '../styles/globals.css';
import Head from 'next/head';
import Script from 'next/script';
import Layout from '../components/layout';
import { getCookie } from 'cookies-next';
function MyApp({ Component, pageProps }) {
const consent = getCookie('localConsent');
return (
<>
<Head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>
<Script
id="gtag"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'analytics_storage': 'denied'
});
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PR7FDL7');`,
}}
/>
{consent === true && (
<Script
id="consupd"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
gtag('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted'
});
`,
}}
/>
)}
<Layout>
<Component {...pageProps} />
</Layout>
</>
);
}
export default MyApp;
Pengujian dengan Tag Assistant menunjukkan bahwa saat Anda membuka atau memuat ulang halaman, halaman yang diperbarui dikirim ke halaman yang diizinkan (dengan persetujuan sebelumnya).
Terapkan persetujuan untuk lebih banyak layanan
Seperti yang disebutkan sebelumnya, layanan Google sudah memiliki pemeriksaan izin bawaan. Jika Anda perlu menerapkannya pada layanan pelacakan lain (Piksel Facebook, Pelacakan Pinterest, sistem periklanan atau analitik lainnya), Anda perlu mengetahui dan menambahkan berbagai layanan untuk diaktifkan (add_storage, analitycs_storage, dll.). Minta izin tambahan untuk meluncurkan tag di setelan izin tag:
Perbaikan dan penyempurnaan
Ini adalah project dasar dan tidak dianggap sebagai project yang lengkap dan siap produksi, karena ini hanya sebuah konsep tentang cara menggunakan Google Tag Manager untuk mengelola izin di Next.js.
Kami mendorong Anda untuk meningkatkan dan memperluas project Anda. Ada beberapa hal yang dapat atau perlu Anda lakukan di environtment produksi.
- Selain menerima/menolak semuanya, ini memberi pengguna kesempatan untuk memilih cakupan mana yang akan diterima dan cakupan mana yang ditolak, memungkinkan pengguna untuk mengelola cakupan persetujuan secara individual. Pengaturan dapat disimpan dalam beberapa cookie atau dalam objek berseri dalam satu cookie.
- Memungkinkan pengguna mengelola setelan cookie sehingga cakupan izin tunggal dapat dihapus atau diberikan setelah setelan awal.
Terima kasih telah membaca.