Google Tag Managerin käyttöönotto ja ensimmäinen tagi

01Mikä GTM on ja mihin sitä käytetään?

Google Tag Manager (GTM) on ilmainen tunnisteidenhallintajärjestelmä, jonka avulla hallitset sivustollesi lisättyjä analytiikka-, mainonta- ja mittauskoodeja yhdestä paneelista. Sivustolle lisätään säiliökoodi vain kerran; muut koodit, kuten GA4, Google Ads ja Meta-pikseli, ajetaan tämän säiliön sisältä.

Suurin hyöty on, ettei jokaisessa uudessa mittaustarpeessa tarvitse olla riippuvainen ohjelmoijasta ja koodin julkaisusta. Markkinointitiimi valmistelee uuden konversiotunnisteen paneelissa, testaa sen esikatselussa ja julkaisee sen. Koska jokainen julkaisu tallennetaan versiona, virheellinen muutos voidaan perua yhdellä napsautuksella.

GTM:llä on myös vastuunsa: jokainen, jolla on pääsy säiliöön, voi lisätä sivustolle koodia. Siksi oikeudet kannattaa jakaa huolellisesti ja turhat tunnisteet siivota säännöllisesti.

02Tunniste, laukaisin ja muuttuja

GTM:n ymmärtämisen avain on kolme peruskäsitettä. Jokainen asennus syntyy näiden kolmen osan liittämisestä toisiinsa.

Mikä data layer on?

Data layer on yhteinen JavaScript-taulukko, jonka kautta sivustosi välittää tietoa GTM:lle. Kirjoitat siihen sivulla näkymättömiä tietoja, kuten tilausnumeron, tuotetiedot tai lomakkeen nimen; GTM lukee nämä tiedot muuttujina ja välittää ne tunnisteille. Näin mittaus perustuu vakaaseen pohjaan, joka ei rikkoudu sivun ulkoasun muuttuessa.

03Tilin ja säiliön luominen

Kirjaudu osoitteeseen tagmanager.google.com yrityksen Google-tilillä. Tili ja säiliö tulee luoda yrityksen nimiin, ja toimistolle tulee antaa vain käyttäjäoikeudet; yhteistyön päätyttyä mittausinfrastruktuuri pysyy sinulla.

1. Paina Luo tili -painiketta, kirjoita tilin nimeksi yrityksesi nimi ja valitse maa.
2. Kirjoita säiliön nimeksi sivustosi osoite ja valitse kohdealustaksi Web.
3. Hyväksy käyttöehdot; näytölle ilmestyvät asennuskoodit.
4. Kirjoita muistiin GTM-alkuinen säiliötunnus.

04Säiliökoodin lisääminen sivustolle

GTM antaa kaksi koodinpätkää. Ensimmäisen tulee olla jokaisen sivun head-osiossa mahdollisimman ylhäällä. Toinen on varakoodi selaimille, joissa JavaScript on pois päältä, ja se lisätään heti avaavan body-tagin jälkeen. Jos käytät yhteistä sivupohjaa tai otsikkotiedostoa, koodin lisääminen vain yhteen paikkaan kattaa kaikki sivut.

<!-- Google Tag Manager -->
<script>(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');</script>
<!-- End Google Tag Manager -->

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

Lisääminen alustan hallintapaneelista

Monet valmiit järjestelmät tarjoavat säiliötunnukselle erillisen kentän ja sijoittavat koodin oikeisiin paikkoihin itse. Auroran verkkokauppa-alustassa Google Tag Manager -koodi lisätään paneelista, ja reaaliaikainen tarkistusnäkymä näyttää, toimiiko koodi todella.

05Ensimmäinen tunniste: GA4:n Google-tunniste

Kun säiliö on ladattu, ensimmäinen tehtävä on yleensä käynnistää GA4-mittaus GTM:n kautta. Jos GA4-resurssia ei vielä ole, hanki mittaustunnus ensin Google Analytics 4 -asennuksen vaiheilla.

Google-tunniste kerää sivun katselut ja tehostetun mittauksen tapahtumat. Lisätapahtumia varten luot erilliset GA4-tapahtuma-tunnisteet, kirjoitat niihin mittaustunnuksen ja tapahtuman nimen ja liität ne sopivaan laukaisimeen. Sama logiikka pätee Google Ads -konversioihin: riittää, että luot Google Ads -paneelista saamallasi konversiotunnuksella ja -tunnisteella Google Ads -konversioseurannan tunnisteen ja liität sen kiitossivuun tai ostotapahtumaan. Kun tunnisteiden nimissä noudatetaan järjestystä työkalu, tyyppi ja tarkoitus, haluamasi löytyy helposti säiliön kasvaessa.

1. Paina Tunnisteet-valikosta Uusi -painiketta ja anna tunnisteelle selkeä nimi (esim. GA4 - Google-tunniste).
2. Valitse tunnisteen määrityksessä tyypiksi Google-tunniste ja kirjoita G-alkuinen mittaustunnuksesi.
3. Valitse Laukaisu-osiossa Initialization - All Pages (Alustus - Kaikki sivut) -laukaisin; näin tunniste latautuu ennen muita tunnisteita.
4. Tallenna. Tunniste ei ole vielä livenä; seuraavaksi esikatselu ja julkaisu.

06Tapahtumien lähettäminen data layerilla

Luotettavin mittaustapa on, että sivusto kirjoittaa data layeriin tapahtuman tärkeinä hetkinä, kuten lomakkeen lähetyksessä tai ostossa. Näkyviin elementteihin, kuten klikkaukseen tai sivun osoitteeseen, perustuvat laukaisimet voivat rikkoutua hiljaa ulkoasun muuttuessa.

Alla olevassa esimerkissä, kun lomake on lähetetty onnistuneesti, kirjoitetaan tapahtuma nimeltä form_gonderildi. GTM:ssä luot Mukautettu tapahtuma -tyyppisen laukaisimen, jonka tapahtuman nimi on form_gonderildi, ja liität GA4-tapahtuma-tunnisteen tähän laukaisimeen. Lomakkeen nimen lukemiseksi määrität Data Layer -muuttuja -tyyppisen muuttujan nimeltä form_adi.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'form_gonderildi',
  form_adi: 'teklif_formu'
});

Yhden sivun sovelluksissa (SPA)

React- tai Vue-kirjastolla tehdyissä yhden sivun sovelluksissa sivunvaihdot eivät lataa selainta uudelleen. Tässä tapauksessa voit käyttää Historian muutos (History Change) -laukaisinta tai kirjoittaa data layeriin tapahtuman aina, kun reititin vaihtaa sivua. Projektin asennuksen olemme kuvanneet oppaassa React-asennus Vitellä.

07Esikatselu, testaus ja julkaisu

Älä julkaise mitään muutosta testaamatta. Oikean yläkulman Esikatsele-painike avaa Tag Assistantin; kun kirjoitat sivustosi osoitteen, sivusto avautuu virheenkorjaustilassa ja näet yksitellen, mikä tunniste ajetaan ja mikä ei kullakin sivulla tai tapahtumassa.

Jos olet tyytyväinen testiin, paina Lähetä-painiketta, anna versiolle kuvaava nimi ja lyhyt huomautus. Kun kirjoitat versionimeen, mitä muutettiin, on kuukausien päästä helpompi selvittää, mikä muutos aiheutti mahdollisen mittausongelman.

• Varmista myös GA4:n DebugView-näkymästä, että tapahtumat saapuvat.
• Jos ongelmia ilmenee, voit julkaista edellisen version uudelleen Versiot-valikosta.
• Suurissa tiimeissä estä muutosten sekoittuminen avaamalla erilliset työtilat.

08Yleiset virheet ja hyvät käytännöt

Ajan myötä säiliöön kertyy käyttämättömiä tunnisteita, ja jokainen niistä lisää sivun kuormaa. Säiliön läpikäynti kolmen kuukauden välein ja käyttämättömien tunnisteiden keskeyttäminen vähentää sekä mittauksen sekavuutta että sivun nopeuteen kohdistuvaa kuormaa; tämä aihe kuuluu myös säännöllisesti nopeuden ja suorituskyvyn hallinta -työhömme.

Mainos- ja mittaustunnisteita ei pidä ajaa ilman kävijän suostumusta. GTM:n suostumusasetukset ja Consent Mode -määritys hallitsevat tätä kulkua. Tämä artikkeli antaa yleistä tietoa; tarkista evästesuostumusrakenteesi osalta voimassa oleva lainsäädäntö ja oikeudellinen neuvonantajasi.