Container Kurulumu ve İlk Tag'ler

📚 Seviye 2 — Uygulama ⏱ ~12 dakika

1. GTM Hesap ve Container Oluşturma

Google Tag Manager'ı kullanmaya başlamak için öncelikle bir hesap ve o hesap altında bir container oluşturmanız gerekir. Hesap genellikle şirketinizi, container ise web sitenizi temsil eder.

a) Hesap Oluşturma Adımları

tagmanager.google.com adresine gidin ve Google hesabınızla oturum açın. Ardından:

Hesap Oluştur butonuna tıklayın.
Hesap Adı: Şirketinizin adını yazın (ör. "ClickToPeak").
Ülke: Türkiye'yi seçin.
Container Adı: Web sitenizin adresini yazın (ör. "www.clicktopeak.com").
Hedef Platform: "Web" seçeneğini işaretleyin.
Oluştur butonuna basın ve kullanım şartlarını kabul edin.

🎯 Benzetme: GTM hesabınızı bir ofis binası gibi düşünün. Bina (hesap) şirketinize aittir, içindeki her oda (container) ise farklı bir web sitenizi temsil eder. Bir şirketin birden fazla web sitesi varsa, aynı hesap altında birden fazla container oluşturabilirsiniz.

b) Container ID'nizi Tanıyın

Container oluşturulduktan sonra size GTM-XXXXXXX formatında benzersiz bir ID verilir. Bu ID, sitenize ekleyeceğiniz kodun temel parçasıdır. Container ID'nizi GTM panelinin sağ üst köşesinde her zaman görebilirsiniz.

2. GTM Kodunu Web Sitenize Ekleme

GTM size iki adet kod parçası (snippet) verir. Bu kodları web sitenizin her sayfasına eklemeniz gerekir.

a) İlk Kod: <head> İçine

Birinci kod parçası, sayfanızın <head> bölümüne, mümkün olduğunca yukarıya eklenmelidir. Bu kod GTM'nin ana JavaScript dosyasını yükler.

b) İkinci Kod: <body> Açılışından Hemen Sonra

İkinci kod parçası, <body> etiketinin hemen altına eklenir. Bu kod, JavaScript devre dışı olan tarayıcılarda da GTM'nin çalışmasını sağlayan bir <noscript> yedek kodudur.

⚠️ Dikkat: İki kodu da eklemeyi unutmayın! Yalnızca <head> kodunu eklemek çoğu durumda yeterli olsa da, <body> kodunu eklememek bazı durumlarda veri kaybına yol açabilir. WordPress kullanıyorsanız "Insert Headers and Footers" gibi eklentiler bu işlemi kolaylaştırır.

flowchart TD A["📄 HTML Sayfanız"] --> B["<head> bölümü"] A --> C["<body> bölümü"] B --> D["✅ GTM Snippet 1\n(JavaScript kodu)"] C --> E["✅ GTM Snippet 2\n(noscript yedek kodu)"] D --> F["📦 GTM Container\nYüklenir"] E --> F F --> G["🏷️ Tag'ler\nTetiklenir"] style D fill:#DCFCE7,stroke:#22C55E style E fill:#DCFCE7,stroke:#22C55E style F fill:#E8F6FC,stroke:#29ABE2

c) Kurulum Doğrulama

Kodları ekledikten sonra doğrulamak için:

Google Tag Assistant: Chrome eklentisini kullanarak sitenizi ziyaret edin, GTM container'ınızın algılandığını doğrulayın.
Sayfa Kaynağını İncele: Tarayıcıda sağ tık → "Sayfa Kaynağını Görüntüle" yaparak GTM kodlarını arayın.
GTM Preview Mode: GTM panelinden Preview butonuna tıklayarak sitenizde container'ın aktif olduğunu kontrol edin.

3. Değişkenler ve Tetikleyici Türleri

Tag'lerinizi oluşturmadan önce GTM'deki değişken ve tetikleyici türlerini tanımanız gerekir.

a) Built-in (Yerleşik) ve User-Defined (Kullanıcı Tanımlı) Değişkenler

Built-in değişkenler, GTM'nin hazır olarak sunduğu değişkenlerdir. Bunlar varsayılan olarak kapalıdır; kullanmak istediklerinizi yapılandırma bölümünden açmanız gerekir:

Page URL, Page Hostname, Page Path: Sayfa bilgileri
Click Element, Click Classes, Click ID, Click URL, Click Text: Tıklama bilgileri
Form Element, Form Classes, Form ID, Form URL, Form Text: Form bilgileri
Scroll Depth Threshold, Scroll Depth Units, Scroll Direction: Kaydırma bilgileri

User-defined değişkenler ise sizin oluşturduğunuz özel değişkenlerdir. Örneğin, Data Layer Variable, JavaScript Variable, Constant, Lookup Table gibi türleri vardır.

b) Tetikleyici (Trigger) Türleri

GTM'de en sık kullanılan tetikleyici türleri:

flowchart LR subgraph "Sayfa Yükleme Tetikleyicileri" A["Page View\n(Sayfa görüntüleme)"] B["DOM Ready\n(DOM hazır)"] C["Window Loaded\n(Sayfa tam yüklendi)"] end subgraph "Kullanıcı Etkileşim Tetikleyicileri" D["Click\n(Tıklama)"] E["Form Submission\n(Form gönderimi)"] F["Custom Event\n(Özel olay)"] end A --> |"En erken"| B --> |"Sırayla"| C style A fill:#E8F6FC,stroke:#29ABE2 style B fill:#E8F6FC,stroke:#29ABE2 style C fill:#E8F6FC,stroke:#29ABE2 style D fill:#DCFCE7,stroke:#22C55E style E fill:#DCFCE7,stroke:#22C55E style F fill:#DCFCE7,stroke:#22C55E

Page View: Sayfa yüklenmeye başladığında tetiklenir. GA4 gibi temel tag'ler için idealdir.
DOM Ready: HTML sayfası tamamen parse edildiğinde tetiklenir. Sayfa elementleriyle etkileşim gerektiren tag'ler için kullanılır.
Window Loaded: Tüm kaynaklar (resimler, scriptler) yüklendiğinde tetiklenir. En son çalışan tetikleyicidir.
Click (All Elements / Just Links): Kullanıcı bir elemente tıkladığında tetiklenir.
Form Submission: Bir form gönderildiğinde tetiklenir.
Custom Event: Data Layer'a gönderilen özel bir olay adıyla tetiklenir.

💡 İpucu: Sayfa yükleme tetikleyicilerinin sırası önemlidir: önce Page View, sonra DOM Ready, en son Window Loaded çalışır. GA4 Configuration tag'i gibi temel tag'ler için "Page View" yeterlidir, çünkü mümkün olan en erken anda çalışmasını istersiniz.

4. İlk Tag'lerinizi Oluşturun: GA4 Configuration ve GA4 Event

Container'ınız hazır, snippet'ler yerleştirildi. Şimdi ilk tag'lerinizi oluşturma zamanı. En temel iki tag ile başlayacağız.

a) GA4 Configuration Tag (Google Tag)

Bu tag, GA4 ile bağlantı kuran temel tag'dir. Her sayfada çalışmalıdır. Oluşturma adımları:

GTM panelinde Tag'ler → Yeni'ye tıklayın.
Tag türü olarak "Google Tag" seçin.
Tag ID alanına GA4 Measurement ID'nizi girin (G-XXXXXXXXXX formatında).
Tetikleyici olarak "All Pages" (Tüm Sayfalar) seçin.
Tag'e açıklayıcı bir isim verin: ör. "GA4 - Google Tag".
Kaydet'e tıklayın.

b) GA4 Event Tag

Bu tag, GA4'e özel olaylar göndermek için kullanılır. Örneğin bir butona tıklandığında "button_click" olayı göndermek istiyorsanız:

Tag türü olarak "Google Analytics: GA4 Event" seçin.
Measurement ID alanına GA4 ID'nizi girin veya Google Tag'inizden referans verin.
Event Name: Olay adını yazın (ör. "button_click").
Gerekirse Event Parameters ekleyin (ör. button_text = {{Click Text}}).
Uygun bir tetikleyici seçin (ör. belirli bir butona tıklama).

🎯 Benzetme: GA4 Configuration Tag'ini bir telefon hattı bağlantısı gibi düşünün — önce hattı açmanız gerekir ki konuşma (veri) akabilsin. GA4 Event Tag'i ise bu hat üzerinden yapılan arama'dır. Hat bağlı olmadan arama yapamazsınız; önce Configuration Tag çalışmalı, sonra Event Tag'leri veri gönderebilir.

5. İlk Sürümü Yayınlama (Publish)

Tag'lerinizi oluşturup test ettikten sonra canlıya almak için bir sürüm yayınlamanız gerekir.

a) Yayınlama Adımları

GTM panelinin sağ üst köşesindeki Gönder (Submit) butonuna tıklayın.
Sürüm Adı: Açıklayıcı bir isim verin (ör. "v1 – GA4 Temel Kurulum").
Sürüm Açıklaması: Ne değiştiğini yazın (ör. "GA4 Configuration ve ilk event tag'i eklendi").
Yayınla (Publish) butonuna tıklayın.

b) Sürüm Geçmişi ve Geri Alma

GTM'nin en güçlü özelliklerinden biri sürüm geçmişi'dir. Her yayınlanan sürüm kaydedilir ve ihtiyaç halinde eski bir sürüme kolayca geri dönebilirsiniz. Bu, hatalı bir değişikliği hızla geri almak için hayat kurtarıcıdır.

⚠️ Dikkat: Yayınlamadan önce mutlaka Preview Mode ile test edin! Canlıya alınan hatalı bir tag, yanlış veri toplanmasına, sitenin yavaşlamasına veya hatalı dönüşüm raporlarına neden olabilir. Bir sonraki derste Preview ve Debug Mode'u detaylı olarak öğreneceksiniz.

flowchart LR A["🛠️ Tag Oluştur"] --> B["👀 Preview Mode\nile Test Et"] B --> C{"Test\nBaşarılı mı?"} C -->|"Evet ✅"| D["📤 Submit &\nPublish"] C -->|"Hayır ❌"| E["🔧 Düzelt"] E --> B D --> F["✅ Canlıda!\nSürüm kaydedildi"] style A fill:#E8F6FC,stroke:#29ABE2 style B fill:#FEF3C7,stroke:#F59E0B style D fill:#DCFCE7,stroke:#22C55E style F fill:#DCFCE7,stroke:#22C55E

⚠️ Sık Yapılan Hatalar

Hata: GTM container snippet'ini sadece <head>'e koymak
Doğrusu: Hem <head> hem <body> gerekli. İkinci snippet (noscript) <body> açılışına eklenmezse JavaScript devre dışı olan tarayıcılarda veri kaybı olur.
Hata: Değişiklikleri Preview'da test etmeden yayınlamak
Doğrusu: Her zaman önce Preview Mode'da test et. Hatalı bir tag canlıda yanlış veri toplanmasına veya sitenin yavaşlamasına neden olabilir.
Hata: Versiyon notları yazmadan yayınlamak
Doğrusu: Her versiyona açıklayıcı not yaz. "v3 — Meta Pixel eklendi, GA4 event güncellendi" gibi. Geri alma gerektiğinde hangi versiyona döneceğini bilirsin.
Hata: Tüm tag'ları tek workspace'te düzenlemek (ekip çalışmasında)
Doğrusu: Farklı workspace'ler kullan. Aynı workspace'te çalışmak, birbirinin değişikliklerini ezme riski yaratır.

📝 Quiz — Bilgini Test Et

← Önceki Ders Sonraki Ders →