Avaat WordPressin hallintapaneelin, käynnistät teemaeditorin ja liität taas yhden JavaScript-pätkän header.php-tiedostoon. Kuulostaako tutulta? Kuukautta myöhemmin sinulla on tusina tällaista pätkää: analytiikkaa, mainospikseleitä, chat-widgettejä, lämpökarttoja. Sivusto raskastuu, ja sekavan koodin ymmärtäminen käy yhä vaikeammaksi.

Google Tag Manager ratkaisee tämän ongelman radikaalisti: tusinan eri puolille teematiedostoja ripotellun tagin sijaan saat yhden säiliön ja verkkokäyttöliittymän, jolla hallitset kaikkea yhdestä paikasta. Ei koodimuutoksia, ei tarvetta soittaa kehittäjälle, ei riskiä asettelun rikkoutumisesta.

Alla on vaiheittainen opas GTM:n asentamiseen WordPressiin: manuaalinen tapa, lisäosatapa ja Google Analytics 4:n käyttöönotto ilman yhtäkään koodiriviä sivustollasi.

💡 Pikaopas:

• Luo ilmainen Google Tag Manager -tili ja hanki säiliö, jossa on kaksi asennuskoodia
• Lisää koodit WordPressiin: manuaalisesti header.php-tiedoston kautta (2 minuuttia) tai GTM4WP-lisäosalla (1 minuutti, ei teemamuokkauksia)
• Yhdistä Google Analytics 4 GTM:n sisällä: "GA4-määritys" -tagi ja "Kaikki sivut" -laukaisin, ei yhtäkään JS-riviä sivustollasi
• Testaa GTM:n esikatselutilassa, julkaise säiliö, ja kaikki tagit toimivat

Mikä Google Tag Manager on

Google Tag Manager on Googlen ilmainen tagien hallintajärjestelmä. Sen sijaan, että sijoittaisit jokaisen seurantakoodin suoraan sivustollesi, lisäät ne GTM:n verkkokäyttöliittymään ja asennat sivustollesi vain yhden pätkän: GTM-säiliön.

Tagi digitaalisen seurannan kontekstissa on JavaScript-pätkä, joka aktivoi kolmannen osapuolen toimintoja: liikenneanalytiikkaa, mainoskampanjoita, chat-widgettejä, lämpökarttoja. Niitä kutsutaan myös web-majakoiksi tai seurantapikseleiksi. Klassinen esimerkki on Google Analytics -koodi, jonka lisäät sivustollesi seurataksesi käyntejä.

Tagien tarjoajat ovat alustoja kuten Google Analytics, Google Ads, Meta (Facebook), LinkedIn, Hotjar ja kymmenet muut. Jokainen tarjoaa oman JS-pätkänsä. Ilman tagien hallintajärjestelmää kaikki nämä pätkät elävät suoraan WordPress-teemasi koodissa.

Miksi tarvitset Google Tag Manageria

Perinteinen tapa muokata manuaalisesti header.php-, functions.php- ja muita teematiedostoja luo kolme ongelmaa.

Ensinnäkin sivuston nopeus. Jokainen kolmannen osapuolen JS-skripti lisää sivun painoa ja pidentää latausaikaa. Tusina tagia eri tarjoajilta, ja Site Speed Google Search Consolessa muuttuu punaiseksi.

Toiseksi tietoturva. Epäluotettavista lähteistä peräisin olevat tagit altistavat sivustosi XSS-hyökkäyksille ja tietovuodoille. Etkä aina tiedä, mitä seuraavan kopioidun pätkän sisällä todella on.

Kolmanneksi ylläpito. Tarjoaja päivittää seurantakoodinsa, ja sinun täytyy kaivaa teematiedostoja ja vaihtaa se manuaalisesti. Yksi väärä merkki ja tagi lakkaa toimimasta, dataa menetetään.

Google Tag Manager poistaa kaikki kolme ongelmaa:

• Yksi säiliö tusinan tagin sijaan. Sivustollasi on vain pari riviä GTM-koodia. Kaikki tagien logiikka elää pilviliittymässä.

• Käyttöönotto ilman kehittäjää. GTM:n käyttöliittymä on intuitiivinen: valitse tagin tyyppi, syötä seurantatunnus, määritä laukaisin, valmista. Ei yhtäkään koodiriviä sivustollasi.

• Sisäänrakennetut integraatiot. GA4, Google Ads, Floodlight, kymmeniä kolmannen osapuolen malleja: valitset listalta sen sijaan, että kopioisit koodia.

• Esikatselutila ja virheenkorjaus. Ennen julkaisua näet, mitkä tagit laukesivat sivulla ja mitä dataa ne lähettivät. Määritysvirheet näkyvät heti, eivät viikkoa myöhemmin raporteissa.

• Versiohallinta. GTM tallentaa kaikkien julkaistujen säiliöversioiden historian. Epäonnistuneen määrityksen palauttaminen vie kaksi sekuntia.

GTM:n ilmainen versio kattaa valtaosan sivustoista tarpeet. Maksullinen versio (Google Tag Manager 360) lisää laajennetun tuen ja korkeammat rajat suurille yritysprojekteille, mutta minkä tahansa kokoluokan WordPress-sivustolle ilmainen taso on enemmän kuin riittävä.

GTM:ssä on oppimiskäyrä, ja käyttöliittymä saattaa aluksi vaikuttaa ylivoimaiselta. Mutta perusskenaariot (GA4 ja pari markkinointitagia) voi oppia tunnissa. Syvempään oppimiseen on suositeltu YouTube-video tämän postauksen lopussa.

Miten Google Tag Manager asennetaan WordPressiin

Seuraavaksi kaksi asennustapaa: manuaalinen (teematiedoston kautta) ja GTM4WP-lisäosan kautta. Molemmat toimivat; valitse työnkulkusi mukaan.

Luo Google Tag Manager -tili

Ensimmäinen askel on ilmainen GTM-tili. Se antaa sinulle säiliön ja tunnuksen, jota tarvitset WordPress-integraatioon.

Mene Google Tag Managerin verkkosivustolle ja kirjaudu sisään Google-tililläsi.

Klikkaa "Luo tili" GTM:n hallintapaneelissa.

Anna tilin nimi (esimerkiksi yrityksesi nimi), valitse maasi ja klikkaa "Jatka".

Määritä sitten säiliön nimi (yleensä sivustosi verkkotunnus), valitse kohdealustaksi "Web" ja klikkaa "Luo".

Hyväksy Google Tag Managerin käyttöehdot ja tietojenkäsittelyehdot.

Vahvistuksen jälkeen näkyviin tulee ponnahdusikkuna, jossa on kaksi asennuskoodia. Älä sulje tätä välilehteä; tarvitset koodeja seuraavassa vaiheessa.

GTM näyttää ohjeet koodien sijoittamiseen: ensimmäinen mahdollisimman ylös <head>-osioon, toinen heti avaavan <body>-tagin jälkeen. Kuulostaa yksinkertaiselta, mutta WordPress-aloittelijalle tämä ei välttämättä ole itsestään selvää. Alla käymme läpi molemmat tavat.

Tärkeää ennen kuin jatkat:

• Varmuuskopioi sivustosi ennen teematiedostojen muokkaamista. Varmuuskopion palauttaminen esimerkiksi UpdraftPlus-lisäosalla vie minuutin; rikkinäisen teeman korjaaminen vie tunnin.
• Vielä parempi: luo WordPress-lapsiteema ja muokkaa sitä pääteeman sijaan. Pääteeman päivittäminen ei silloin ylikirjoita muutoksiasi.

Manuaalinen GTM-asennus header.php:n kautta

Siirry WordPressin hallintapaneelissa kohtaan "Ulkoasu → Teemaeditori."

Kuvakaappauksessa näkyy lapsiteema, jossa on tiedostot header.php (header), footer.php (footer), rtl.css ja 404.php. Lisäämme GTM-koodit tiedostoon header.php.

Klikkaa "Theme Header (header.php)" oikeanpuoleisessa tiedostonavigointipaneelissa.

Noudata GTM:n ohjeita: ensimmäinen koodi mahdollisimman ylös <head>-osioon, toinen heti avaavan <body>-tagin jälkeen. WordPressissä <body>-tagi näyttää yleensä tältä: <body <?php body_class(); ?>>.

Kopioi ensimmäinen koodi GTM:stä ja liitä se ylös <head>-osioon.

Kopioi toinen koodi ja liitä se heti avaavan <body>-tagin jälkeen.

Klikkaa "Päivitä tiedosto" näytön alareunassa. Valmista, GTM on asennettu sivustollesi manuaalisesti. Koko prosessi vie pari minuuttia.

Etkö halua koskea teematiedostoihin? Seuraavaksi käsitellään lisäosamenetelmä, joka tekee saman asian ilman yhtäkään koodimuokkausta.

Asennus GTM4WP-lisäosalla

GTM4WP (Google Tag Manager for WordPress, tekijä: DuracellTomi) on suosituin lisäosa GTM:n integroimiseksi WordPressiin: yli 700 000 aktiivista asennusta, päivitetty vuodesta 2013 lähtien. Se ei ainoastaan lisää säiliökoodeja, vaan luo myös datakerroksen WooCommercea, kontaktien seurantaa ja muita tilanteita varten.

Siirry WordPressin hallintapaneelissa kohtaan "Lisäosat → Lisää uusi".

Kirjoita hakukenttään "Google Tag Manager for WordPress" ja napsauta "Asenna nyt".

Asennuksen jälkeen napsauta "Ota käyttöön".

Näytön yläreunaan ilmestyy ilmoitus, joka kehottaa syöttämään GTM-tunnuksesi. Napsauta ilmoituksessa olevaa linkkiä.

GTM-tunnuksesi löytyy Google Tag Manager -tililtäsi yläpaneelista säiliön nimen vierestä. Muoto: GTM-XXXXXXX.

Kopioi tunnus, palaa WordPressin hallintapaneeliin, liitä se lisäosan asetussivun vastaavaan kenttään ja napsauta "Tallenna muutokset".

Valmista. Lisäosa sijoitti automaattisesti molemmat GTM-koodit oikeille paikoille; et avannut yhtäkään PHP-tiedostoa.

Nyt kun GTM-säiliö on sivustollasi, määritetään tiedonkeruu Google Analytics 4:n kautta.

Miten Google Analytics 4 yhdistetään Google Tag Managerin kautta

Aiemmin GTM:ssä käytettiin "Universal Analytics" -tagia; se lakkasi keräämästä dataa heinäkuussa 2024. Ainoa nykyinen vaihtoehto on Google Analytics 4 (GA4). Se määritetään kolmessa vaiheessa: luomalla tagi, määrittämällä mittaus-ID ja liittämällä triggeri.

Jos sivustollasi on vielä vanhaa Universal Analytics -koodia (gtag('config', 'UA-XXXXX-Y') -funktio header.php-tiedostossa tai lisäosan kautta asennettuna), poista se ensin. Muuten GA4 ja Universal Analytics tuplaavat datan, mikä vääristää raporttejasi.

Palaa GTM-tilillesi ja klikkaa vasemmasta valikosta "Tags".

Klikkaa "New" (luo-painike).

Nimeä tagi (esimerkiksi "GA4, Page Views") ja klikkaa "Tag Configuration" -kenttää valitaksesi tagin tyypin.

Valitse tagityyppien listalta "Google Analytics: GA4 Configuration". Nimenomaan GA4, ei Universal Analytics. GTM:n käyttöliittymä päivittyy säännöllisesti, joten kohtien sijainti voi poiketa hieman kuvakaappauksista, mutta logiikka pysyy samana.

Palaat tagin määritykseen. Syötä "Measurement ID" -kenttään GA4-mittaustunnuksesi (muotoa G-XXXXXXXXXX). Jotta tunnusta ei tarvitse kovakoodata jokaiseen tagiin, luo muuttuja: tämä on GTM:n paras käytäntö.

Valitse "New Variable" ja kirjoita avautuvaan ikkunaan Google Analytics 4:n Measurement ID. Nimeä muuttuja esimerkiksi "GA4 Measurement ID".

Löydät Measurement ID:n kirjautumalla Google Analytics -tilillesi ja valitsemalla sopivan propertyn.

Siirry kohtaan "Admin" → "Property Settings" → "Data Streams" → valitse web-stream. Measurement ID alkaa G--merkillä ja näkyy stream-kortin oikeassa yläkulmassa.

Kopioi Measurement ID, liitä se muuttujakenttään ja klikkaa "Save".

Määritetään seuraavaksi triggeri, eli ehto, jolla tagi laukeaa. Klikkaa "Triggering"-osiota.

Seurataksesi kaikkia sivun katseluita valitse sisäänrakennettu "All Pages" -triggeri.

Klikkaa "Tallenna". GA4-tunniste on valmis, mutta sitä ei ole vielä julkaistu.

Tunnisteen testaus ja julkaisu

Ennen kuin lähetät säiliön tuotantoon, testaa tunniste esikatselutilassa. Klikkaa "Esikatsele"-painiketta oikeassa yläkulmassa.

GTM siirtyy virheenkorjaustilaan. Lataa sivustosi uudelleen; selainikkunan alareunaan avautuu GTM-konsoli, joka näyttää, että GA4-tunniste laukesi sivun latauksessa.

Varmistaaksesi, että data saapuu GA4:ään, avaa Google Analytics ja siirry kohtaan "Raportit → Reaaliaikainen". Näet juuri sivuston uudelleenlatauksella tuottamasi sivun katselun.

Data liikkuu. Et lisännyt riviäkään JavaScriptiä sivustollesi; kaikki käsitellään GTM-säiliön sisällä.

Julkaise nyt säiliö, jotta tunniste toimii kaikille kävijöille. Klikkaa "Lähetä" oikeassa yläkulmassa.

Avautuvassa ikkunassa anna versiolle kuvaava nimi (esimerkiksi "GA4-sivun katselun tunniste v1") ja kuvaus.

Klikkaa "Julkaise". Julkaisun jälkeen aktiivinen säiliöversio näkyy vihreällä indikaattorilla.

Siinä kaikki, GA4 kerää dataa WordPress-sivustoltasi Google Tag Managerin kautta. Muut tunnisteet lisätään samalla prosessilla: valitse tyyppi, määritä parametrit, liitä laukaisin, testaa, julkaise. GTM hallinnoi kunkin tunnisteen järjestystä ja latausaikaa automaattisesti.

Jos haluat syventyä GTM:n ominaisuuksiin (klikkitapahtumista YouTube-soittimen seurantaan ja Google Ads -integrointiin), katso tämä video-opas: se kattaa koko GA4 + GTM -asennussyklin WordPressissä.

⁉️🤔 Usein kysytyt kysymykset

Miten Google Tag Manager eroaa Google Analyticsista?

Google Analytics kerää dataa kävijöistä: sivun katselut, liikenteen lähteet, konversiot. Google Tag Manager ei itse kerää dataa; se on lähetti, joka toimittaa tunnisteet sivustollesi. GTM yksinkertaistaa kymmenien markkinointityökalujen asentamisen ja päivittämisen yhdestä verkkokäyttöliittymästä, kun taas GA4 käsittelee kerätyn datan raporteissa.

Onko GTM4WP-lisäosan käyttö pakollista vai pärjäänkö ilman sitä?

Pärjäät ilman lisäosaa lisäämällä kaksi GTM-koodia header.php-tiedostoon manuaalisesti. GTM4WP-lisäosa on kätevämpi: se ei kadota asetuksia teemaa vaihdettaessa, lisää data layerin WooCommercelle ja yhteydenottolomakkeille sekä sijoittaa koodit automaattisesti oikeisiin paikkoihin. Valinta riippuu siitä, kuinka usein vaihdat teemaa ja tarvitsetko valmiin data layerin.

Mikä on data layer ja miksi tarvitsen sitä?

Data layer on JavaScript-objekti, kerros sivustosi ja GTM:n välillä. Se välittää jäsenneltyä dataa: tuotetunnuksen, tilauksen summan, tapahtumatyypin. GTM lukee data layerin ja päättää, mikä tunniste laukeaa milloinkin. Ilman data layeria seuraat sivun katseluita; sen kanssa seuraat jokaista käyttäjän toimintoa tarkkoine summineen ja tuotenimineen.

Onko Google Tag Manager ilmainen?

Kyllä, perusversio on täysin ilmainen ilman rajoituksia tunnisteiden, laukaisimien tai liikennemäärän suhteen. Maksullinen Tag Manager 360 (150 000 dollaria vuodessa, Googlen virallisen Marketing Platform -sivun mukaan) lisää laajennetun tuen ja SLA:n yritystiimeille. Minkä tahansa kokoiselle WordPress-sivustolle ilmainen versio on enemmän kuin riittävä.

Täytyykö minun poistaa vanha Universal Analytics -koodi ennen GA4:n asennusta?

Ehdottomasti. Universal Analytics lopetti datan käsittelyn heinäkuussa 2024. Vanha UA-XXXXX-Y-koodi, joka on jäänyt header.php-tiedostoon tai lisäosaan, kahdentaa datan GA4:n kanssa ja vääristää raportteja. Kun olet asentanut GA4:n, tarkista Google Analyticsissa kohta "Järjestelmänvalvoja → Datan vertailu": poikkeamien puuttuminen odotettuun liikenteeseen nähden vahvistaa, että vanha koodi on poistettu.

Kuinka varmistan, että GTM toimii asennuksen jälkeen?

Kolme tapaa: avaa sivun lähdekoodi (Ctrl+U) ja etsi GTM- <head>-osiosta; säiliön pitäisi olla siellä. Asenna Google Tag Assistant Legacy -laajennus Chromeen; se näyttää kaikki sivun aktiiviset tunnisteet. Ota esikatselutila käyttöön GTM:ssä, lataa sivustosi uudelleen ja varmista, että virheenkorjauskonsolissa näkyy vihreä "Yhdistetty"-tila.

Mitä WordPressiin kannattaa asentaa, yhteenveto

Google Tag Manager on työkalu, joka säästää tunteja joka kerta, kun vaihdat markkinointitunnistetta. Sen sijaan, että "menisit koodiin, etsisit oikean tiedoston, korvaisit pätkän ja tarkistaisit, ettei mikään hajonnut", avaat verkkokäyttöliittymän, muokkaat tunnisteen asetuksia ja klikkaat "Julkaise". Ei tarvetta hosting-palvelun käyttöön, teemaeditoriin eikä riskiä sivustosi kaatumisesta ylimääräisen pilkun takia PHP:ssä.

WordPress-sivuston keskeinen skenaario: asenna GTM GTM4WP-lisäosan kautta (kerran, kaksi minuuttia), lisää GA4-tunniste (kerran, viisi minuuttia testauksineen), ja analytiikka toimii. Sen jälkeen lisäät Hotjarin, Google Adsin, LinkedIn Insight Tagin ja mitkä tahansa muut pikselit tarpeen mukaan koskematta sivustosi koodiin.

Aloita GA4:stä ja esikatselutilasta varmistaaksesi, että data liikkuu. Tutustu sitten GTM:n sisäänrakennettuihin tunnistemalleihin: tarjolla on kymmeniä valmiita integraatioita, jotka aiemmin vaativat JavaScriptin manuaalista sijoittamista jokaiselle sivulle.