google tag manager 101
TRANSCRIPT
www.damgh.com
GOOGLE TAG MANAGER 101
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?
1- Hesap OluşturmaGoogle 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
“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
3- Kapsayıcı (Container) Adı OluşturmaKapsayı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
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
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
5- Değişken (Variable) Yaratmak - 1Bu 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
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
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.
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
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
6- Etiketler (Tags) / 4 - PageViewDö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
Ö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
“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
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
6- Etiketler (Tags) / 8 - IDArtık trigger’ımız hazır. “Continue” butonuna tıklayarak son adıma geçebiliriz.
www.damgh.com
6- Etiketler (Tags) / 9 - IDSon 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
6- Etiketler (Tags) / 10 - Data AttributeBir 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
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
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
6- Etiketler (Tags) / 13 - Data AttributeEtiket için yeni bir trigger oluşturmak için “New” butonuna tıklıyoruz.
www.damgh.com
6- Etiketler (Tags) / 14 - Data AttributeAçı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
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
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
7- Preview ve Publish / 1Tü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
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
7- Preview ve Publish / 3Tü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
www.damgh.com
Teşekkürler.Google Tag Manager ile ilgili daha fazla bilgi için bize yazın.
www.damgh.com [email protected]
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