HubSpot GA, GTM, Adroll Tracking İşlemleri

HubSpot GA / GTM Kurulum İşlemleri

Bir önceki yazımda Hubspot tarafında sunulan izleme (tracking) kodu ile ilgili detaylara değinmiştim. CRM sisteminin önemli bir parçası olan bu izleme kodunun yanı sıra Hubspot bize Google Analytics, Google Tag Manager ve AdRoll etiketlerini de kolay bir şekilde Sayfalar (Pages) ile ilişkilendirme imkanı sunar¹.

Kurulum işlemleri için Settings > Tools > Website adımlarını izleyerek Pages seçeneğine ulaşabiliriz.

Bu bölümde yer alan Integrations sekmesini tıklayarak ilgili etiketlerle ilgili alana ulaşırız. Tracking integrations başlığı altında da görülebileceği üzere Hubspot bize kolay bir şekilde şu kod kurulumlarını aktifleştirme imkanı sunmaktadır.

• Google Analytics
• Google Tag Manager
• AdRoll

Kodlarla ilgili bilgilerin öncesinde alan adı (domain) konusuna değinelim. Choose a domain to edit its settings başlığı altında aksi seçilmediği sürece aktif olan seçeneğimiz her zaman Default settings for all domains olacaktır. Bu seçenek yapılacak işlemin tüm Pages tanımlarını (website, landing page, blog) kapsamasını sağlar. İlgili seçimi tıklayarak tanımlı olan diğer alan adlarını görüntüleyebilir ve ilgili işlemleri sadece seçtiğiniz alan adı tanımı üzerinden de yürütebilirsiniz².

Ben örnek içerisinde all domains seçeneği kullanarak ilerleyeceğim.

Google Analytics

Integrate with Google Analytics seçimini aktifleştirdiğinizde web sayfasının head etiketleri arasında analytics.js kütüphanesini içeren Google Analytics kurulum kodu yerleştirilecektir. Bildiğiniz üzere, analytics.js fonksiyonları ga() ile başlamakta.

<!--  Added by GoogleAnalytics integration -->
<script>
var _hsp = window._hsp = window._hsp || [];
_hsp.push(['addPrivacyConsentListener', function(consent) {
  if (consent.allowed || (consent.categories && consent.categories.analytics)) {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create','UA-XXXXXX-Y','auto');
  ga('send','pageview');
}}]);
</script>
<!-- /Added by GoogleAnalytics integration -->

Dolayısıyla, bu bilgi ışığında sonraki işlemleri devam ettirmelisiniz. Sonraki işlemler ile ilgili açıklama için aşağıdaki Templates bölümüne göz atabilirsiniz.

Google Tag Manager

Integrate with Google Tag Manager seçimi web sayfasının head etiketleri arasına standart kurulum kodunu ve body etiketinden hemen sonra iframe kodunu ekleyecektir.

<!--  Added by GoogleTagManager integration -->
<script>
var _hsp = window._hsp = window._hsp || [];
_hsp.push(['addPrivacyConsentListener', function(consent) {
  if (consent.allowed || (consent.categories && consent.categories.analytics)) {
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXXXX');
}}]);
</script>
<!-- /Added by GoogleTagManager integration -->

Adroll

Integrate with Adroll seçimi Adroll tracking kodunun body açılış etiketinin hemen sonrasında eklenmesini sağlar. GTM iframe kodu bu izleme kodunun ardından gelir.

<!--  Added by AdRoll integration -->
<script type="text/javascript">
  adroll_adv_id = "XXXXXXXXXXXX";
  adroll_pix_id = "YYYYYYYYYYYY";
  var _hsp = window._hsp = window._hsp || [];
  (function () {
      var _onload = function(){
          if (document.readyState && !/loaded|complete/.test(document.readyState)){setTimeout(_onload, 10);return}
          if (!window.__adroll_loaded){__adroll_loaded=true;setTimeout(_onload, 50);return}
          _hsp.push(['addPrivacyConsentListener', function(consent) { if (consent.allowed || (consent.categories && consent.categories.advertisement)) {
            var scr = document.createElement("script");
            var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
            scr.setAttribute('async', 'true');
            scr.type = "text/javascript";
            scr.src = host + "/j/roundtrip.js";
            ((document.getElementsByTagName('head') || [null])[0] ||
                document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
          }}]);
      };
      if (window.addEventListener) {window.addEventListener('load', _onload, false);}
      else {window.attachEvent('onload', _onload)}
  }());
</script>
<!-- /Added by AdRoll integration -->

Google Analytics, Google Tag Manager ve Adroll kodlarında görüldüğü üzere, global nesnemiz _hsp.

Bu kodların aktifleştirildiklerinde ilk olarak Google Analytics sayfaya eklenir. Elbette aksi bir durum söz konusu değilse, GA ile birlikte GTM kodunun kullanılmasına pek gerek olmayabilir. Ancak, GTM seçimini de aktiflştirmiş iseniz, GTM kodu GA kodunun hemen ardından eklenecektir. Her iki kod da </head> etiketinin hemen öncesinde yer alır. Adroll etiketi ise <body> etiketinin hemen ardından gelir ve GTM iframe kodu Adroll snippet sonrasında yer alır³.

Templates

Yine Pages seçeneği altında yer alan sekmelerden biri de Templates seçeneğidir. Bu sekmeyi tıklamanızın ardından HTML başlığı altında iki bölüm görürsünüz; Site header HTML ve Site footer HTML. Bu alanlar web sayfalarına harici kod eklemeleri yapabilmemizi sağlar. Bu seçenekler Content > Blog bölümü için de ayrıca sunulmaktadır. Bu eklemeler de yine seçilen alan adı tanımına göre ele alınacaktır.

Site header HTML

Bu alana eklenen kod en son eklenir. Yani, GA, GTM sıralaması üzerinden anlatmak gerekirse, diğer tüm kodlar eklendikten sonra bu alana eklenen kodlar yerleştirilecektir. Dolaysısıyla, </head> etiketinin hemen öncesinde yer alırlar.

Site footer HTML

Bu alana eklenen kod </body> etiketinin hemen öncesine eklenir. Dolayısıyla, tüm DOM ögelerinin ardından gelir.

Templates altındaki seçimleri dataLayer ve ga event tanımları için kullanabilirsiniz. Eğer var olan seçenekleri aktifleştirerek ilerliyorsanız _hsp nesnesini kullanmayı unutmamalısınız.