Sitenizi kişiselleştirmek ister misiniz?
Günümüzde kişiselleştirme çözümleri oldukça önem arz etmekte ve Google Tag Manager bize bu noktada oldukça efektif çözümler sunabiliyor. HTML Dom yapısına GTM ile manipüle edebiliyor olmamız; kampanyalarımızda kullanıcılara farklı sonuç sayfaları veyahut müşterinin ihtiyacı özelinde farklı indirim tutarları gösterme gibi birçok farklı senaryo kurabiliyoruz. Tabi bu işlemleri javascript aracılığı ile yapıyor olmamızda, yapabileceklerimizi hayal gücümüzle sınırlandırıyor.
Daha öncesinde bu yöntemi kullanarak birçok yazı yazdım, aşağıdaki örnekleri inceleyebilirsiniz;
- E-Ticarette UTM ile Dinamik Kupon Kodu Otomasyonu
- Tag Manager ile Konum Ayarlı PopUp Oluşturma
- Google Ads Açılış Sayfasına Kullanıcı Lokasyonu Yazdırma
- GTM ile DataLayer Kullanmadan Ürün Değerlerini Dinamik Olarak Çekme
- Korumalı: Anahtar Kelimemizi Popup İçerisine Nasıl Yerleştiririz?
Bu yazıda sitemizin yapısında dışarıdan nelere ve nasıl manipüle edebiliriz, bu müdahaleleri kişiselleştirme çözümü olarak nasıl kullanabiliriz konusuna değineceğim.
DOM nedir?
DOM (Document Object Module) HTML dökümanları içerisinde bulunan nesnelere kolaylıkla erişim sağlamak ve üzerinde işlemler yapabilmek için tasarlanan bir modeldir. DOM ile HTML dosyamızda bulunan her şeye erişim sağlayabiliriz.
HTML dosyasında bulunan bütün öğeler, DOM üzerinde bir nesne olarak görülür. DOM modelin ismi, document ise bu nesnelerin kapsayıcısıdır. Bu kapsayıcı içerisinde bulunan html etiketi head, body nesnelerinin içerisinde bulunan diğer nesnelerin kapsayıcısıdır. Head ve body etiketleri de içerisinde bulunan diğer nesnelerin kapsayıcılarıdır.
Bu yapıyı bir soy ağacı olarak nitelendirebiliriz. DOM ağaç yapısını daha iyi anlamak için standart bir HTML yapısına göz atalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM tree structure</title>
</head>
<body>
<h1>DOM tree structure</h1>
<h2>Learn about the DOM</h2>
</body>
</html><html> Belgemiz soy ağacı içersindeki ilk daldır. Head ve body öğelerini içeren iki dalı vardır.
Hem öğelerin <head>hem de <body> öğelerinin kendi alt dalları vardır.
İşte bu soy ağacını görsel hali.
Belgedeki bu öğelere erişebilir ve JavaScript kullanarak bunlarda değişiklik yapabiliriz.
JavaScript kullanarak DOM ile nasıl çalışabileceğimize dair birkaç örneğe bakalım.
HTML Öğeleri Nasıl Seçilir
HTML belgesinde bir öğe seçmenin birkaç farklı yöntemi vardır.
Bu yazıda, bu yöntemlerden üçüne odaklanacağız:
getElementById(): HTML içerisinden “id” değeri ile seçmegetElementsByClassName(): HTML içerisinden “class” değeri ile seçmequerySelector(): Seçici ile eşleşen ilk kaydı getirir.
İlk örneğimiz web sitemizdeki başlığı değiştirmek olsun.
getElementById()
Başlığımızın id değeri “alan” ifadesi ile getElementById işlemimiz kullanacağız.
document.getElementById("alan").innerText
getElementsByClassName()
Başlığımızın class değeri “title__inner” ifadesi ile getElementByClassName işlemimiz kullanacağız.
document.getElementByClassName ("title__inner")[0].innerText[0] işlemi “title_inner” class değerine sahip olan elementler arasında 0. index’i yani birinci elementi getir anlamına gelir. Sıralama özelliğini id’ler için kullanmayız, çünkü her id tekildir.
querySelector()
Başlığımızın id ve class değerlerini stilleme ekleyerek birinci değerlerini çağırabilirim. Class için “.” ID için “#”
document.querySelector ("#alan").innerText
document.querySelector (".title__inner").innerText
HTML Öğeleri Nasıl Değiştirilir
Aslında bu işlem çok basit, seçicinizin sonuna “=” ekleyerek dilediğiniz değeri tanımlayabilirsiniz.
HTML Öğeleri CSS Manipülasyonu
Herhangi bir seçici ile seçtiğimiz elementi değiştirmek istediğimiz css türünü devamına ekleyerek bir değer tanımlayacağız.
Beyaz olan başlığımızı kırmızıya çevirelim ve yazıyı biraz daha küçültelim.
HTML içine Yeni Element Ekleme
Örneği değiştirelim biraz daha zorlayıcı bir işlem yapalım.
Demo e ticaret sitem için ürün sayfamdaki sepete ekleme butonunun hemen yanına kupon kodu alanı ekleyeceğim.
İlk olarak kod yerleştirmek istediğim alanın class yada id değerini buluyorum. Benim sepete ekle bölgesi için class değerim aşağıdaki görselde paylaştığım gibi “woocommerce-variation-add-to-cart”. İstediğim alanı bulduğuma göre dilediğim kodu oraya ekleyebilirim.
NOT: Bir class içerisine element eklerken tüm stil değerlerini devralacağını unutmayın.
Yeni bir element eklemek için “insertAdjacentHTML” özelliğini kullanıyoruz.
document.getElementsByClassName('woocommerce-variation-add-to-cart')[0].insertAdjacentHTML('beforeend', '<button style= "margin: 10px;" class="button">Kupon Kodu: SANAOZEL20</button>');
GTM İle Js Dom Kullanımı
Yukarıdaki örnekten devam edelim ve oluşturduğum kupon değerini facebook reklamımdan gelen bir kullanıcının görmesi için çalıştırayım (Bu örneğin tam versiyonunu buradan okuyabilirsiniz).
Bunun için yeni bir HTML etiketi oluşturup daha önceden oluşturduğumuz kod betiğimizi girelim.
<script>
document.getElementsByClassName('woocommerce-variation-add-to-cart')[0].insertAdjacentHTML('beforeend', '<button style= "margin: 10px;" class="button">Kupon Kodu: SANAOZEL20</button>');
</script>Tetikleyici kısmı için kampanyaya tanımladığım UTM değerini kullanıcağım. https://demo.abdulazizgolca.com?utm_source=facebook&utm_medium=indirim
Page URL içerir > facebook
Facebook üzerinden gelen kullanıcılara kupon tanımlamış olduk. Tabi bu şekilde kullanım pek efektif olmayacaktır buradaki amacımız Dom işlemleri ile neler yapabildiğimi anlamak.
Gerçek Projelerinde DOM Nasıl Kullanılır?
Bu yazı, kullanabileceğiniz bazı DOM yöntemlerine kısa bir giriş niteliğindeydi. Bu makalede ele almadığımız daha birçok örnek var. Daha öncesinde bu yöntemi kullanarak birçok yazı yazdım, aşağıdaki örnekleri inceleyebilirsiniz;
E-Ticarette UTM ile Dinamik Kupon Kodu Otomasyonu
Tag Manager ile Konum Ayarlı PopUp Oluşturma
Google Ads Açılış Sayfasına Kullanıcı Lokasyonu Yazdırma
GTM ile DataLayer Kullanmadan Ürün Değerlerini Dinamik Olarak Çekme
Korumalı: Anahtar Kelimemizi Popup İçerisine Nasıl Yerleştiririz?
