Implementacija GTM-a

Kako bi se uspješno povezao Google Tag Manager sa konfiguracijom za Klaro potrebno je napraviti sljedeće:

Ažuriranje postojeće skripte za Klaro
Ažuriranje config.js koda
Ažuriranje koda skripti za praćenje u <head> dijelu

Klaro

Prije svega potrebno je ažurirati klaro na najnoviju verziju, a to uključuje klaro.js skriptu za samu funkcionalnost i prateći scss za stiliziranje klaro modala. Kod za skriptu se može pronaći ovdje.

Nakon toga je potrebno u config.js postaviti sljedeće postavke za Google Tag Manager:

{
    name: 'google-tag-manager',
    required: true,
    purposes: ['marketing'],
    onAccept: `
                // we notify the tag manager about all services that were accepted. You can define
                // a custom event in GTM to load the service if consent was given.
                for(let k of Object.keys(opts.consents)){
                    if (opts.consents[k]){
                        let eventName = 'klaro-'+k+'-accepted'
                        dataLayer.push({'event': eventName})
                    }
                }
            `,
    onInit: `
                // initialization code here (will be executed only once per page-load)
                window.dataLayer = window.dataLayer || [];
                window.gtag = function(){dataLayer.push(arguments)}
                gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied'})
                gtag('set', 'ads_data_redaction', true)
            `,
},

Nakon toga se u <head> blok uređuju skripte za praćenje pri tome se sve skripte za praćenje miču i ostaje samo skripta za GTM:

<!-- Google Tag Manager -->
< script defer type="text/javascript" data - name="google-tag-manager"> (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-NXM4ML44');< /script>
< !--End Google Tag Manager -->

Također se prije svega u <body> blok dodaje sljedeći dio koda:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NXM4ML44" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Nakon toga se u config.js mogu definirati sve potrebne skripte za praćenje. Za Google Analytics bi to izgledalo ovako:

{
    // In GTM, you should define a custom event trigger named `klaro-google-analytics-accepted` which should trigger the Google Analytics integration.
    name: 'google-analytics',
    cookies: [
        ['_ga', '/', '.' + $domain], // we delete the Google Analytics cookies if the user declines its use
    ],
    purposes: ['marketing'],
    onAccept: `
                // we grant analytics storage
                gtag('consent', 'update', {
                    'analytics_storage': 'granted',
                })
            `,
    onDecline: `
                // we deny analytics storage
                gtag('consent', 'update', {
                    'analytics_storage': 'denied',
                })
            `,
},

Google Adwords:

{
    name: 'google-ads',
    cookies: [],
    onAccept: `
                // we grant ad storage and personalization
                gtag('consent', 'update', {
                    'ad_storage': 'granted',
                    'ad_user_data': 'granted',
                    'ad_personalization': 'granted'
                })
            `,
    onDecline: `
                // we decline ad storage and personalization
                gtag('consent', 'update', {
                    'ad_storage': 'denied',
                    'ad_user_data': 'denied',
                    'ad_personalization': 'denied'
                })
            `,
    purposes: ['marketing'],
},

Google Tag Manager

Nakon implementacije navedenog koda, potrebno je ispravno postaviti Google Tag Manager. To se izvršava na način da se dodaju Oznake i pridružuju im se pripadajući ID-jevi za svaku uslugu. Nakon toga im se pridružuje okidači koji ih aktiviraju. U ovome slučaju će za Google Analytics to izgledati ovako:

Pri tome je posebno kreiran okidač Klaro – GA koji ima sljedeće postavke:

Za Adwords je nešto drugačije:

A ovako izgleda njegov okidač:

Za Meta Pixel je procedura malo drugačija. Prije svega je potrebno kreirati Custom HTML tag i dodijeliti mu naziv, npr. Meta. Nakon toga se iz sučelja za Meta Pixel kreira Event koji će generirati kod koji se može postaviti u Google Tag Manager kao HTML kod. Nakon toga je potrebno postaviti parametar za aktiviranje, npr. Once per page. Također je potrebno postaviti okidač tako da se kod pokreće na svim stranicama.

Prema GDPR-u bi trebalo i postaviti u konfiguraciji za Klaro, uslugu za Meta Pixel kod tako da klaro pošalje signal, npr. klaro-meta-pixel-accepted kako bi i njega mogli dodati kao okidač u GTM, na taj način će se skripta od Mete izvršavati samo uz suglasnost korisnika.

Završetak

Nakon uspješne implementacije potrebno je pratiti podatke u pripadajućim sučeljima za usluge koje su aktivirane kako bi se vidjelo dolaze li novi podaci prema uslugama. Ukoliko se podaci prikupljaju znači da je sve dobro implementirano. Također ovaj tekst je pisan prema standardu za Consent mode V2 za Google Tag Manager i to na takav način da zadovoljava trenutne zahtjeve od strane Google-a za praćenje podataka.

Izvorna inačica stranice (5.5.2025.) te je kao takva podložna budućim izmjenama od strane autora.