Google Tag Manager ile CSS Düzenlemek

Bazen sitenizin CSS dosyalarında değişiklik yapmak isteyebilirsiniz, fakat bunun için teker teker style dosyalarının içinde gezmek, ilgili class ve id’leri bulmak düzenlemek ftp üzerinden tekrar siteye yüklemek zaman alan bir işlem.

Ayrıca sitenizdeki CSS ve HTML kodları için bir panel kullanıyor olsanız bile zaman içinde eklenen kod blokları büyüdükçe karmaşıklığa yol açacaktır ve kontrol edilmez bir hale gelecektir.

Bu tür problemlerden kaçınmak için google tag managerdan yararlanmak, sizi hem karmaşıklıktan hemde boşa giden zamandan kurtaracaktır.

Yapmanız gereken işlemleri maddeler halinde özetleyecek olursak;

• GTM üzerinden yeni bir tag yani etiket oluşturmak
• Bu etiketin hangi sayfalarda yada koşullarda çalışacağına dair bir trigger yani tetikleyici oluşturmak
• Gerekli CSS kodlarını yazmak
• Etiketi isimlendirip kaydetmek

İsterseniz anlama sürecini kolaylaştırmak adına görseller üzerinden ilerleyelim.

1. Öncelikle GTM hesabımıza giriş yapıp tags sekmesinden yeni bir etiket oluşturuyoruz.

2. Yeni butonuna tıkladığınız anda karşınıza aşağıdaki gibi bir pencere gelecek.

3. Öncelikle “tag configuration” kutucuğuna tıklayıp “Custom HTML” etiketini seçmemiz gerekiyor, unutmayın Custom HTML etiketini seçtiğinizde html, css veya javascript kodlarını sitenize ekleyebilirsiniz.

4. Yukarıdaki adımları tamamladığınızda, düzenleme yapacağımız CSS kodlarını ekleyebileceğimiz bir ekran bizi karşılayacak.

5. Yukarıdaki örnekte olduğu gibi CSS kodlarımızı ekliyoruz. Bu noktada dikkat etmeniz gereken ayrıntı ekleyeceğiniz CSS kodlarınıetiketleri içerisine yazmanız gerekecektir. Aksi halde eklediğiniz her şey sitenizin ön yüzünde normal bir yazı şeklinde gözükecektir. Aynı şekilde javascript kodu ekleyecekseniz etiketleri arasına yazmayı unutmayın.

6. Bu aşamadan sonra birde trigger yani tetikleyici oluşturmamız gerekiyor.

7. Kodları eklediğiniz kısmın altında yer alan bu kutucuğa tıklarsanız, oluşturduğunuz etiketin hangi sayfalarda çalışacağını seçebilirsiniz. Kodlarda kullanacağım class ve id’ler sadece değişiklik yapmak istediğim sayfada bulunduğu için etiketi her sayfada çalışacak şekilde ayarlıyorum.

8. Kutucuğa tıkladığınızda karşınıza gelen sayfadan “All pages” seçeneğini seçmeniz gerekiyor.

9. Tüm adımları yerine getirdiysek, etiketimize bir isim verip kaydetmemiz gerekiyor, ardından önce preview mode üzerinden kodlarımızın istediğimiz şekilde çalışıp çalışmadığını kontrol edip, yayınlayabilirsiniz.

10. Aşağıdaki sayfaya bakarsanız, hiçbir CSS kodunun eklenmediğini görebilirsiniz.

11. Oluşturduğumuz etiket ve eklediğimiz kodlardan sonra sayfamızın nasıl gözüktüğüne bakalım.

Yapmanız gerekenler bu kadar, sadece birkaç adımda sayfanızda istediğiniz değişiklikleri yapabilirsiniz.

Bir sonraki yazıda tekrar görüşmek üzere.