Google Tag Manager hakkında kurulumundan başlayarak bilmeniz gereken 101 seviyesindeki bilgileri örnekleriyle anlatan sunumdur.

1. www.damgh.com
GOOGLE TAG MANAGER 101

2. Google Tag Manager kapsayıcı snippet'i, site genelinde çalışan ve diğer tüm etiketlerinizi Google Tag
Manager arayüzünde belirttiğiniz kurallara göre tetikleyen bir etikettir.
Google Tag Manager, hem Google etiketlerini hem de Google dışı etiketleri tetikleyebilir. Kapsayıcı snippet'i sitenize
yerleştirildikten sonra, yeni etiketler yerleştirmek veya mevcut etiketleri düzenlemek için BT ekibinin/web yöneticisinin
müdahalesi gerekmez veya bu gereklilik oldukça azdır.
Bu sunumumuzda sizlere Dam Growth Hackers olarak, Google Tag Manager’da hesap oluşturma, etiket oluşturma, değişken
oluşturma, ve kural seti belirleme gibi temel özellikleri, kendi web sitenizde kullanabileceğiniz örneklerle anlatmaya
çalışacağız.
www.damgh.com
Google Tag Manager Nedir?

3. 1- Hesap Oluşturma
Google Tag Manager’i kullanmaya başlamak için, Google hesabınızla tagmanager.google.com adresine giriş
yaptıktan sonra “Create Account” butonuna tıklanıp bir hesap oluşturulur.
www.damgh.com

4. “Add Account” butonuna tıklandıktan sonra açılan ekranda ilk olarak hesap adı girilir ve “Continue” butonuna
tıklanarak ikinci adıma geçilir.
2- Hesap Adı Oluşturma
www.damgh.com

5. 3- Kapsayıcı (Container) Adı Oluşturma
Kapsayıcı(Container) ismi girildikten sonra “Create” butonuna tıklanır ve karşımıza çıkan “Google Tag Manager
Terms of Service Agreement” penceresinde “Yes” butonuna tıklanarak işlem tamamlanır.
www.damgh.com

6. 4- GTM Kodunun Alınması
Bir önceki ekranda “Yes” butonuna basıldığında karşımıza aşağıdaki gibi bir pencere açılır. Pencere
içersinde size özel üretilen kod web sitenizde body etiketinin başladığı satırdan hemen sonraki satıra
eklenir. Eğer ki web sitesi bir layout mantığına sahipse, bu kod master page sayfasına, değilse tüm
sayfalara ayrı ayrı eklenmelidir. Wordpress altyapısı kullanılıyorsa, bir eklenti yardımıyla da bu işlem
gerçekleştirilebilir.
www.damgh.com

7. 5- Değişkenler (Variables)
GTM’in hâli hazırdaki değişkenleri, “Variables” sekmesinde aşağıdaki gibi gösterilmektedir. Kullanmak
istediğiniz değişken veya değişkenleri işaretleyerek tag oluştururken rahatlıkla kullanabilirsiniz.
Hâli hazırdaki değişkenler yeterli olmadığında (ki olmayacaktır), GTM bize kendi değişkenlerimizi yaratma
imkanı da sunuyor.
www.damgh.com

8. 5- Değişken (Variable) Yaratmak - 1
Bu maddeyi, Google Analytics’in bize vermiş olduğu “Tracking ID”yi bir değişken olarak tanımlayıp daha iyi
pekiştirebiliriz. Yazdığımız her tag bizden bir “TrackingID” istediğinden, bunu bir kez tanımlayıp bütün
taglerimizde kullanmamız çok daha verimli ve kolay olacaktır. Peki bu nasıl yapılır?
Variables penceresinin en alt kısmında bulunan “New” butonuna basarak işleme başlayabiliriz.
www.damgh.com

9. 5- Değişken (Variable) Yaratmak - 2
“New” butonuna tıklandığında karşımıza 1 numaralı pencere açılır. Burada custom değişken yaratmamızı
sağlayan “Constant” a tıklanır ve açılan alanlara (2 numaralı pencere) öncelikle değişken adı ardından da
değişkenin bize dönmesini istediğimiz değer girilir. “Create Variable” butonuna tıklanır. Böylece değişkenimiz
oluşturulmuş olur. Biz bu örneğimizde değişken olarak “Tracking ID”yi seçtik. Siz sürekli kullanacağınız
herhangi başka bir değişkeni burada tanımlayabilirsiniz.
2
www.damgh.com
1

10. 6- Etiketler (Tags) / 1 - PageView
İlk olarak bir “PageView” etiketi tanımlayarak hem etiketin nasıl tanımlandığını, hem de daha önceden
tanımlamış olduğumuz değişkeni nasıl kullanacığımızı bu örneğimizde kolaylıkla anlayabiliriz.
Etiketi tanımlamak için ilk olarak “Tags” butonuna tıklanır ve açılan pencerede “New” butonuna tıklanır.
www.damgh.com
“New” butonuna
tıklandıktan sonra
açılan pencerede
etiketleri oluşturmak
için toplam dört adım
sunulur. Birinci
adımda bizden hangi
etiketi kullanmak
istediğimizi
seçmemizi ister ve
“Google Analytics”
etiketi seçilir.

11. 6- Etiketler (Tags) / 2 - PageView
“Google Analytics” etiketi seçildikten sonra ikinci adımda “Universal Analytics” butonuna tıklanır.
Not: Biz Universal Analytics kullandığımız için bu butona tıklıyoruz. Eğer siz Classic Google Analytics kullanıyorsanız
seçiminizi ona göre yapmalısınız. Google yakın bir gelecekte tamamen Universal Analytics’e geçeceği için, tavsiyemiz;
Universal Analytics kullanmanızdır.
www.damgh.com

12. 6- Etiketler (Tags) / 3 - PageView
Üçüncü adımda, bu etiketi neyin tetiklemesi gerektiğini bize sorar. Biz bu örneğimizde bir “PageView” etiketi
oluşturacağımız için ve bu etiket tüm sayfalara girildiğinde tetiklenmesi gerektiği için “All Pages”i seçiyor ve
“Continue” butonuna tıklıyoruz.
İlerleyen örneklerimizde “Click” olayında tetiklenecek bir etiket de yaratacağız.
www.damgh.com

13. 6- Etiketler (Tags) / 4 - PageView
Dördüncü ve son adımda bizden etiket adımızı, “Tracking ID”mizi ve “Track Type” ı seçmemizi isteyecek. “Tag
Name” kısmına PageView(veya siz ne isterseniz), “Tracking ID” kısmına; daha önceden bir değişken olarak
tanımlamış olduğumuz myTrackingID değişkenini çağırabiliriz. “Track Type” da “Page View” olarak seçili
olmalıdır.
Bunların tümünü doldurup Create Tag butonuna tıkladığımızda etiketimiz kullanıma hazır olmuş olur.
www.damgh.com

14. Önceki örneğimizde bir etiketin nasıl oluşturulduğunu tüm adımlarıyla gördük. Bu örneğimizde ise id’si “my-
button” olan bir butona tıklandığında tetiklenecek bir etiket yaratacağız. İlk adımda “Google Analytics”, ikinci
adımda “Universal Analytics”i seçip, üçünü adımda bu sefer “Click” butonuna tıklıyoruz.
6- Etiketler (Tags) / 5 - ID
www.damgh.com

15. “Click” butonuna tıklandıktan sonra açılan pencereden “Some Clicks” e tıkladığımızda karşımıza gelen
ekranı(Ekran 2) aşağıda gösterildiği gibi dolduruyoruz ve ardından “Continue” butonuna basıyoruz.
Click ID diye bir seçenek yok ise, 5-Değişkenler (Variables) bölümünde anlattığımız GTM’nin bize sunduğu değişkenlerden Click ID isimli
değişkeni aktif hâle getirmemiz gerekiyor.
1
2
6- Etiketler (Tags) / 6 - ID
www.damgh.com

16. 6- Etiketler (Tags) / 7 - ID
“Continue” butonuna bastıktan sonra açılan alanlara Etiket Adı ve Etiket Tipi’ni giriyoruz ve “Save Trigger”
butonuna basıyoruz.
www.damgh.com

17. 6- Etiketler (Tags) / 8 - ID
Artık trigger’ımız hazır. “Continue” butonuna tıklayarak son adıma geçebiliriz.
www.damgh.com

18. 6- Etiketler (Tags) / 9 - ID
Son adımda; etiket adımızı yazdık, Tracking ID’yi yarattığımız değişkenden çektik, “Track Type”ı “Event” olarak
seçtik. Artık “Category”, “Action” ve “Label” alanlarını doldurup “Create Tag” butonuna tıklayıp etiketimizi
kullanılabilir bir hâle getirebiliriz.
www.damgh.com

19. 6- Etiketler (Tags) / 10 - Data Attribute
Bir etiket oluşturulurken, class veya id haricinde, etiketimizi data attribute’lar ile de oluşturabiliriz. Örneğin web
sitesinde belirlenen bir imajı attribute’ları ile birlikte nasıl kullanacağımızı görelim.
İlk olarak yeni bir değişken(variable) tanımlayarak işe başlayabiliriz. Değişkenimizi seçerken bu sefer “Data
Layer Variable” butonuna tıklıyoruz.
www.damgh.com

20. 6- Etiketler (Tags) / 11 - Data Attribute
Açılan pencerede değişkene isim verdikten sonra “Data Layer Variable Name” kısmına
gtm.element.attributes.tracking-label yazıyoruz. Son kısma “tracking-label” yazmamızın sebebi, HTML’de track
edeceğimiz elemente bu ismi vermemizdir. Siz hangi isim altında takip etmek istiyorsanız bu kısma o ismi
girmelisiniz. “Create Variable” butonuna tıklayarak değişkenimizi tanımlamayı tamamlamış bulunuyoruz.
www.damgh.com

21. 6- Etiketler (Tags) / 12 - Data Attribute
Şimdi ise daha önceki adımlarda oluşturduğumuz etiketler gibi “Google Analytics” & “Universal Analytics”
etiketi oluşturuyoruz ve Click butonuna tıklıyoruz.
www.damgh.com

22. 6- Etiketler (Tags) / 13 - Data Attribute
Etiket için yeni bir trigger oluşturmak için “New” butonuna tıklıyoruz.
www.damgh.com

23. 6- Etiketler (Tags) / 14 - Data Attribute
Açılan pencerede “Some Clicks” seçildikten sonra yarattığımız değişkeni artık kolaylıkla çağırıp kullanabiliriz.
“Continue” butonuna tıklayıp, daha önceki örneğimizde yaptığımız gibi ilgili alanları doldurup etiketimizi
tamamlamış oluruz.
www.damgh.com

24. 6- Etiketler (Tags) / 15 - Custom HTML
“Custom HTML” içeren bir tag oluşturmak için, daha önceki örneklerimizdeki gibi “Tags” penceresinde “New”
butonuna tıklayıp, bu sefer “Google Analytics” yerine “Custom HTML Tag” butonuna tıklıyoruz.
www.damgh.com

25. 6- Etiketler (Tags) / 15 - Custom HTML
“Custom HTML” etiketimizi bu örneğimizde tüm sayfalarda kullanılacak şekilde ayarladık ve “Trigger” olarak
“All Pages”i kullandık. Siz dilerseniz bunu bir “Click” olayıyla da tetikleyebilirsiniz. “Trigger” seçimini yaptıktan
sonra etiketin ismini verip belirtilen alana kodlarınızı eklerseniz etiketiniz sorunsuz bir şekilde çalışacaktır.
www.damgh.com

26. 7- Preview ve Publish / 1
Tüm işlemlerimizi yaptık. Şimdi sıra yapılanları canlı ortama taşımaya geldi. Bunun için sağ üst köşedeki
“Publish” butonuna tıklıyoruz.
Açılan pencerede, işlemlerimizi canlı ortama taşımadan önce kontrollerini sağlamak için ilk olarak “Preview”
butonuna tıklıyoruz ve ekranımıza şöyle bir dialog kutusu geliyor.
www.damgh.com

27. 7- Preview ve Publish / 2
Şimdi web sitemizi açıyoruz. Google Tag Manager sitemize otomatik olarak bir iframe içersinde açılan bir
konsol ekliyor. Bu konsolun içinde yazdığımız etiketlerin doğruluğunu kolaylıkla sağlayabiliyoruz.
www.damgh.com

28. 7- Preview ve Publish / 3
Tüm işlemler tamam olduğuna göre tekrar sağ üstteki “Publish” butonuna basıp açılan ekranda tekrar “Publish”
butonuna tıklanır. Karşımıza 2 numaralı pencere açılır ve “Publish Now” butonuna tıklanır. Karşımıza “Success!”
ekranı(3 numaralı ekran) geldiğinde tag oluşturma ve yayına alma işlemimiz tamamlanmış olur.
2
www.damgh.com
3
1

29. www.damgh.com
Teşekkürler.
Google Tag Manager ile ilgili daha fazla bilgi için bize yazın.
www.damgh.com
info@damgh.com
WEB
SOSYAL MEDYA
OFİS Bağdat Cad Öncü sok. Büyükhanlı sitesi B1 Kat 10 D.26-27
Suadiye Kadıköy İstanbul
0 216 302 49 87
linkedin.com/company/damgrowthhackers
@damgrowthhacker
youtube.com/user/DAMGrowthHackers
google.com/+Damghackers
slideshare.net/damgrowthhackers