HubSpot İzleme Kodu (Tracking Code) İşlemleri

Genel olarak web sitesi ve web uygulaması ayrımında da tercihler farklılık gösterebilmekte. Ancak, bazı servisler kendi yapıları içerisinde çalışan özel sistemler oluşturabilmekte. Customer Relationship Management (CRM) başlıklı yazının devamı olarak değindiğim HubSpot bunlardan biri.

Bu yazı ve bu yazı ile ilgili yayınlayacağım sonraki yazılarda HubSpot bağlamında analitik sürecine değineceğim.

HubSpot ve Web Analitiği

HubSpot, kendi yapısı içerisinde oldukça kapsamlı özelliklere sahip ve başarıyla çalışan bir tracking sistemine sahip. HubSpot başlığı altında çeşitli paketler (Hub) değinmiştim. İlgili tracking kodu tüm bu sistemlerle başarılı bir şekilde ilişkiler oluşturabilmekte. Bu kodun benzersiz bir ID değeri (Hub ID) özelinde verileir gönderdiğini unutmamamız gerekir. Ek olarak, Landing Page, Blog ve CMS yapıları da elbette bu sistemin bir parçası olarak değerlendirilmekte¹. Peki, harici bir sistem (externally hosted pages) kullanıyorsak?

Yine ilgili yazıda da bahsi geçtiği üzere HubSpot pek çok entegrasyon imkanı sunuyor. Bu vesile ile de çeşitli API ve eklenti (plugin) seçenekler sunuluyor.

Öncelikle, bazı hatırlatmalar yapmakta fayda var.

• Her izleme kodu tek bir HubSpot hesabı (Hub ID) ile ilişkilidir.
• Tek bir sayfaya birden fazla HubSpot izleme (tracking) kodu yüklü ise ilk yüklenen izleme kodu tetiklenir; sonraki HubSpot izleme kodları yüklenmez. Bu nedenle, tek izleme kodu kullanmalısınız².
• SPA için ayrı bir kurulum süreci takip edilmeli³.
• Websiteniz eğer farklı bir alan adı ya da alt alan adı (subdomain) üzerinden yayınlanıyor ise alan adlarınızı (company domain'e ek olarak) ve/veya alt alan adlarınızı HubSpot'taki ayarlara da eklemeniz gerekir⁴. Takip edilmesi gereken adımlar şöyle; Settings > Tracking & Analytics > Advanced Tracking
• İzleme kodu, AMP sitelerinde çalışmamaktadır.
• Eğer plugin (eklenti) desteği olan bir araç kullanıyorsanız, izleme işlemini resmi eklentiler aracılığı ile yürütmelisiniz⁵.

Embed kod şu şekilde:

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/<hub-id>.js"></script>
<!-- End of HubSpot Embed Code -->

Advanced Tracking seçeneği altında izleme kodu ile ilgili alan adı, cookie, cross-domain, exclude traffic, vb. seçeneklerini yönetebilirsiniz.

Yukarıdaki JavaScript kodunun </body> etiketi öncesine yerleştirilmesi yeterli olacaktır. Ardından, kullandığınız modern internet taraycısına ait Network sekmesi üzerinden ilgili kodun istek gerçekleştirdiğini kontrol edebilirsiniz⁶.

WordPress web sitenize kurulum yapacaksanız ve HubSpot All-in-One Marketing - Forms, Pop-ups, Live Chat WordPress eklentisini kullanamıyorsanız ilgili izleme kodunu footer.php (</body> etiketinin burada bulunduğunu varsayarsak) dosyasına ekleyebilirsiniz. Elbette bu işlem için Business plan ve üzeri bir plana sahip olmalısınız⁵.

Shopify kurulumu için de kod kurulumunu theme.liquid dosyası üzerinden gerçekleştirebilirsiniz.

Elbette daha pek çok CMS sistemi için de ilgili dosyalar üzerinden benzer kurallar çerçevesinde işlemleri yürütebilirsiniz².

Kod Özelleştirme

Ajax, modal, popup, slider vb. sayfa içi etkinliklerin ayrıca izlenmesini isteyebilirsiniz. Bu durumda, dataLayer yazılarında da belirttiğim üzere, Hubspot tarafında da benzer şekilde push() metotunu kullanmamız gerekiyor.

var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', '/home']);

Yukarıdaki kod parçacığını embed snippet'i öncesinde kullandığımızda ilk (default) sayfa olarak /home izleme koduna iletilecektir. Sonraki değişimleri ise şu şekilde embed kodu sonrasında aktarabiliriz.

var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', '/about-us']);
_hsq.push(['trackPageView']);

trackPageView embed kodu ile birlikte ilk değeri iletmekte. Sonraki her değişimin yine aktarılabilmesi için yinelenmesi gerekiyor⁷.

state değişimlerini ise şu şekilde gerçekleştirmekteyiz³.

var stateObj = { foo: 'updated' };
history.pushState(stateObj, "updated page", "updated.html");
// _hsp oluşturulmuş ise // aksi durumda var _hsq = window._hsq = window._hsq || []; ile oluşturmamız gerekir.
_hsq.push(['trackPageView']);

Bir kullanıcıyı tanımlamak için ise identify parametresini kullanırız. Ardından, hangi bilgi üzerinden kullanıcıyı ilişkilendireceğimizi belirtmeliyiz. Örneğin, e-posta ve favori renk için bu işlemi nasıl yapabileceğimize bir bakalım³.

_hsq.push(["identify", {
    email: 'name@domain.com',
    favorite_color: 'orange'
}]);

Özel etkinlikler (buton tıklama, öge görüntüleme, sepete ürün atma, vb.) için ise trackEvent parametresinden faydalanırız³.

_hsq.push(["trackEvent", {
  id: "Clicked Buy Now button",
  value: 20.5
}]);

Evet, izleme kodu ile ilgili bilmemiz gereken temel bilgiler bu kadar. Sonraki süreçte GTM aracılığı ile form gönderimi başta olmak üzere çeşitli etkinlikleri nasıl takip edebileceğimize bakacağız.