Get started with Tag Manager

2. Asenna verkkosäilö

Seuraava: 3. Lisää tagit Google Tag Managerissa

Asenna tarvittavat koodinpätkät verkkosivustosi Google Tag Manager ‐säilöön seuraamalla näitä ohjeita. Seuraavista materiaaleista löytyy ohjeita Tag Managerin käyttöönottoon muuntyyppisille säilöille:

iOS: Google Tag Manager for iOS
Android: Google Tag Manager for Android
AMP: AMP:n ja Tag Managerin määritysopas
Palvelin: Server-side Tag Manager (Palvelinpuolen Tag Manager)

Ennen kuin aloitat

Sinun pitää luoda Tag Manager ‐tili ja ‐säilö.
Sinulla pitää olla pääsy verkkosivustosi koodiin.

Ohjeet

Siirry osoitteeseen https://tagmanager.google.com.
Kirjaudu Google-tilillesi. Katso, miten Google-tili luodaan.
Avaa muokattava Tag Manager ‐säilö.
Valitse Työtila-välilehdeltä säilön tunnus (jonka alussa on "GTM").
Seuraa Asenna Google Tag Manager ‐valintaikkunan ohjeita verkkosivustosi jokaisella sivulla:

Huom. Jos sivusto on luotu sivustotyökalulla tai CMS-järjestelmällä (esim. Wordpress, Shopify tai Wix), voit ottaa Google-tagin käyttöön integroinnilla, joka ei edellytä koodin päivittämistä jokaisella sivulla. Katso ohjeet Google-tagin asentamiseen sivustotyökalun tai CMS:n avulla.
1. Kopioi ensimmäinen koodilohko ja liitä se mahdollisimman ylös <head>-tagiin.
  
  Esimerkki
  Seuraavassa HTML-esimerkissä ensimmäinen Google Tag Manager ‐koodinpätkä liitetään avaavan <head>-HTML-tagin perään. Huomaa, että seuraavassa esimerkissä käytetään GTM-ABCDEFGH-määritettä, mutta sinun pitää korvata tunnus säilön tunnuksella.
  
  <!DOCTYPE html>
  <html lang="en">
  <head>
  
  <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-ABCDEFGH');</script>
  
  
  <title>Esimerkkisivusto</title>
  </head>
  <body>
  
  <h1>Tervetuloa verkkosivustolleni</h1>
  <p>Tämä on esimerkkikappale verkkosivustollani.</p>
  </body>
  </html>
2. Kopioi toinen koodinpätkä ja liitä se heti avaavan <body>-tagin perään.
  
  Esimerkki
  Alla olevassa HTML-esimerkkikoodissa toinen Google Tag Manager ‐koodinpätkä liitetään heti avaavan <body>-HTML-tagin perään. Huomaa, että seuraavassa esimerkissä käytetään GTM-ABCDEFGH-määritettä, mutta sinun pitää korvata tunnus säilön tunnuksella.
  
  <!DOCTYPE html>
  <html lang="en">
  <head>
  
  <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-ABCDEFGH');</script>
  
  
  <title>Esimerkkisivusto</title>
  </head>
  <body>
  
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  
  
  
  <h1>Tervetuloa verkkosivustolleni</h1>
  <p>Tämä on esimerkkikappale verkkosivustollani.</p>
  </body>
  </html>
3. Testaa verkkosivustoasi lisäämällä sivustosi linkki ja klikkaamalla Testaa.
Klikkaa OK.

Mitä seuraavaksi

Ota tagit käyttöön ja hallinnoi niitä Google Tag Managerin avulla.

Oliko tästä apua?

Miten sivua voisi parantaa?