İçeriğe geç
ceaksan
hubspot

HubSpot Dönüşüm Takibi Rehberi: İzleme Kodu, GTM, Form ve Chat Tracking

HubSpot izleme kodunu kurun, GTM ile entegre edin, form gönderimlerini AJAX ile yönetin ve chat dönüşümlerini takip edin. Kapsamlı teknik rehber.

28 Mar 2026 3 dk okuma
TL;DR

HubSpot izleme kodu kurmak yalnızca başlangıç. Asıl değer, _hsq API ile sayfa ve olay takibi, GTM ile GA4/Ads entegrasyonu, AJAX ile form gönderimlerini yakalama ve Conversations chat widget'ını dönüşüm olarak ölçebilmekte. Bu rehber HubSpot dönüşüm takibinin tüm katmanlarını ele alıyor.

HubSpot, CRM sisteminin bir parçası olarak kendi izleme altyapısını sunuyor. Ancak izleme kodunu kurmak yalnızca başlangıç; asıl değer, bu altyapıyı GTM ile entegre edebilmek, form gönderimlerini takip edebilmek ve chat dönüşümlerini ölçebilmekte.

Bu rehberde HubSpot izleme kodunun kurulumundan _hsq API kullanımına, GA4/GTM entegrasyonundan AJAX form gönderim ve chat (Conversations) tracking’e kadar tüm dönüşüm takibi süreçlerini ele alacağım.

İzleme Kodu Kurulumu

HubSpot izleme kodu, benzersiz bir Hub ID ile ilişkilidir ve tüm HubSpot Hub’ları (Marketing, Sales, Service, CMS) ile entegre çalışır1.

Temel Kurallar

  • Her izleme kodu tek bir HubSpot hesabı (Hub ID) ile ilişkilidir
  • Tek sayfada birden fazla HubSpot izleme kodu yüklenirse yalnızca ilki tetiklenir2
  • AMP sitelerinde çalışmaz
  • SPA (Single Page Application) için ayrı kurulum gerekir3
  • Farklı alan adı veya alt alan adı kullanıyorsanız Settings > Tracking & Analytics > Advanced Tracking altından ekleyin4

Kod Yerleştirme

<!-- 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 -->

Bu kodu </body> etiketinin hemen öncesine yerleştirin. Kurulumu doğrulamak için tarayıcının Network sekmesinden hs-scripts.com isteğini kontrol edin5.

WordPress: HubSpot eklentisi kullanamıyorsanız footer.php dosyasına ekleyin (Business plan gerektirir).

Shopify: theme.liquid dosyası üzerinden kurulum yapın.

_hsq API: Sayfa ve Olay Takibi

HubSpot izleme kodu _hsq global nesnesi üzerinden çalışır. Bu API ile sayfa görüntüleme, kullanıcı tanımlama ve özel olay takibi yapabilirsiniz.

Sayfa Görüntüleme (Page View)

SPA veya dinamik içeriklerde sayfa değişimlerini bildirmek için:

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

trackPageView her sayfa değişiminde yeniden çağrılmalıdır. history.pushState ile state değişimlerinde de kullanılabilir3:

var stateObj = { foo: "updated" };
history.pushState(stateObj, "updated page", "updated.html");
_hsq.push(["trackPageView"]);

Kullanıcı Tanımlama (Identify)

Bilinen bir kullanıcıyı HubSpot contact’ı ile ilişkilendirmek için:

_hsq.push([
  "identify",
  {
    email: "kullanici@example.com",
    favorite_color: "orange",
  },
]);

Özel Olay Takibi (Custom Events)

Buton tıklama, ürün görüntüleme, sepete ekleme gibi özel etkinlikler için:

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

GA4 ve GTM Entegrasyonu

HubSpot Pages (website, landing page, blog) üzerinde GA4, GTM ve AdRoll etiketlerini doğrudan etkinleştirebilirsiniz. Settings > Tools > Website > Pages > Integrations altından:

  • Integrate with Google Analytics: Daha önce analytics.js (UA) yüklerdi, artık gtag.js (GA4) kodunu <head> etiketleri arasına ekler
  • Integrate with Google Tag Manager: GTM snippet’ini <head> ve <body> etiketlerine ekler
  • Integrate with AdRoll: AdRoll tracking kodunu <body> sonrasına ekler
HubSpot Pages Ayarları
HubSpot Pages Ayarları
HubSpot GA GTM AdRoll Entegrasyonu
HubSpot GA GTM AdRoll Entegrasyonu

_hsp Privacy Consent

HubSpot entegrasyon kodları _hsp global nesnesi üzerinden çalışır ve addPrivacyConsentListener ile consent durumunu kontrol eder:

var _hsp = (window._hsp = window._hsp || []);
_hsp.push([
  "addPrivacyConsentListener",
  function (consent) {
    if (
      consent.allowed ||
      (consent.categories && consent.categories.analytics)
    ) {
      // GA4 veya GTM kodu buraya
    }
  },
]);

Domain Ayarları

Choose a domain to edit its settings altından tüm alan adları için veya belirli bir alan adı için ayrı yapılandırma yapabilirsiniz.

Pages > Templates altında iki özel alan mevcuttur:

  • Site header HTML: Tüm entegrasyon kodlarından sonra, </head> öncesine eklenir
  • Site footer HTML: </body> öncesine eklenir

Bu alanları dataLayer tanımları ve özel GA event’leri için kullanabilirsiniz.

HubSpot Site Header Footer HTML
HubSpot Site Header Footer HTML

Form Dönüşüm Takibi

HubSpot formlarını standart embed dışında AJAX ile de gönderebilirsiniz. Bu yöntem daha fazla esneklik ve kontrol sağlar.

Forms API ile AJAX Gönderim

HubSpot Forms API endpoint’i:

POST https://api.hsforms.com/submissions/v3/integration/submit/<portalId>/<formId>

Payload yapısı:

{
  "submittedAt": "1517927174000",
  "fields": [
    { "name": "email", "value": "kullanici@example.com" },
    { "name": "firstname", "value": "Ahmet" }
  ],
  "context": {
    "hutk": "<hubspotutk-cookie-degeri>",
    "pageUri": "www.example.com/page",
    "pageName": "Kayıt Sayfası"
  },
  "legalConsentOptions": {
    "consent": {
      "consentToProcess": true,
      "text": "Gizlilik bildirimini okudum, onaylıyorum."
    }
  }
}

hubspotutk cookie’si HubSpot’un kullanıcı etkinliği takibi için kullandığı benzersiz değerdir. AJAX gönderimlerinde bu değeri context.hutk alanına eklemeniz gerekir:

const gethutk = Object.fromEntries(
  document.cookie.split(/; /).map((c) => {
    const [key, v] = c.split("=", 2);
    return [key, decodeURIComponent(v)];
  }),
);

const hutk = gethutk.hubspotutk || window.__hsUserToken;

AJAX Form Gönderim Örneği

document.getElementById("hb-submit").addEventListener("click", function (e) {
  e.preventDefault();

  const name = document.getElementById("hs-firstname");
  const email = document.getElementById("hs-email");
  const portalId = "<hesap-id>";
  const formId = "<form-id>";
  const endpoint = "https://api.hsforms.com/submissions/v3/integration/submit";

  fetch(`${endpoint}/${portalId}/${formId}`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      fields: [
        { name: "firstname", value: name?.value || "" },
        { name: "email", value: email?.value || "" },
      ],
      submittedAt: Date.now(),
      context: {
        hutk: document.cookie.match(/hubspotutk=([^;]+)/)?.[1] || "",
        pageName: document.title,
        pageUri: window.location.href,
      },
      legalConsentOptions: {
        consent: {
          consentToProcess: true,
          text: "Gizlilik bildirimini okudum, onaylıyorum.",
        },
      },
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      /* Başarılı */
    })
    .catch((error) => {
      /* Hata */
    });
});
HubSpot Form
HubSpot Form

GTM ile Form Event Takibi

AJAX veya standart form gönderimlerini GTM’e aktarmak için dataLayer.push() kullanın:

dataLayer.push({
  event: "hubspot_form_submitted",
  formId: "<form-id>",
  formName: "Newsletter Kayıt",
});

GTM’de hubspot_form_submitted Custom Event trigger’ı oluşturun ve istediğiniz dönüşüm etiketlerini bağlayın.

Chat (Conversations) Dönüşüm Takibi

HubSpot Conversations (chat widget), web sitelerinde ve Facebook sayfalarında ziyaretçilerle sohbet imkanı sağlar. Live Chat ve Chatbot seçeneklerini Chatflows altından yönetebilirsiniz.

HubSpot Conversations
HubSpot Conversations

Conversations API

HubSpot Conversations API ile sohbet olaylarını dinleyip GTM’e aktarabilirsiniz6:

// API erişilebilirlik kontrolü
if (window.HubSpotConversations) {
  initChatTracking();
} else {
  window.hsConversationsOnReady = [initChatTracking];
}

function initChatTracking() {
  // Sohbet başlatma
  window.HubSpotConversations.on("conversationStarted", (payload) => {
    dataLayer.push({ event: "hs_chat_started" });
  });

  // Sohbet kapatma
  window.HubSpotConversations.on("conversationClosed", (payload) => {
    dataLayer.push({ event: "hs_chat_closed" });
  });
}

postMessage ile Widget Takibi

Conversations API dışında, message event listener ile widget değişimlerini de izleyebilirsiniz:

window.addEventListener("message", function (event) {
  if (event.origin !== "https://app.hubspot.com") return;

  let eventData = JSON.parse(event.data);
  let eventAction = false;

  switch (eventData.type) {
    case "closed-welcome-message":
      eventAction = "Closed - Welcome Message";
      break;
    case "open-change":
      eventAction = eventData.data ? "Opened - Window" : "Closed - Window";
      break;
    case "external-api-event":
      if (eventData.data.eventType === "conversationStarted")
        eventAction = "conversationStarted";
      break;
  }

  if (eventAction) {
    dataLayer.push({
      event: "hubspot_chat_event",
      event_category: "Live Chat",
      event_action: eventAction,
      event_label: eventData.uuid,
    });
  }
});
HubSpot Conversations postMessage
HubSpot Conversations postMessage

Test ve Doğrulama

  1. İzleme kodu: Tarayıcı Network sekmesinde hs-scripts.com/<hub-id>.js isteğini kontrol edin
  2. _hsq API: Konsola window._hsq yazarak queue’nun oluştuğunu doğrulayın
  3. GA4/GTM: HubSpot Pages’de entegrasyon aktif ise _hsp nesnesinin consent listener’ını kontrol edin
  4. Form gönderimi: AJAX ile form gönderin, HubSpot > Contacts altında yeni contact oluştuğunu doğrulayın
  5. Chat tracking: Sohbet başlatın, GTM Preview’da hs_chat_started event’ini kontrol edin
  6. hubspotutk: document.cookie içinde hubspotutk değerinin mevcut olduğunu kontrol edin
not

Tek sayfada birden fazla HubSpot izleme kodu yüklenirse yalnızca ilki çalışır. HubSpot Pages içinde GA4 ve GTM entegrasyonlarını aynı anda aktifleştirirseniz GTM üzerinden yönetmek daha tutarlı sonuç verir.

Footnotes

  1. Track visitors in HubSpot. HubSpot Knowledge Base ↩
  2. Install the HubSpot tracking code. HubSpot Knowledge Base ↩
  3. Tracking in single-page applications. HubSpot Developers ↩ ↩2
  4. Set up site tracking in HubSpot. HubSpot Knowledge Base ↩
  5. Troubleshoot the HubSpot tracking code. HubSpot Knowledge Base ↩
  6. HubSpot Conversations JavaScript API. HubSpot Developers ↩
Önemli Noktalar
  • 01 HubSpot izleme kodu Hub ID'ye bağlıdır ve tek sayfada birden fazla kod yüklenirse yalnızca ilki tetiklenir
  • 02 _hsq API ile sayfa görüntüleme, kullanıcı tanımlama (identify) ve özel olay takibi yapılabilir
  • 03 HubSpot Pages'da GA4, GTM ve AdRoll entegrasyonları doğrudan Settings > Integrations'dan etkinleştirilir
  • 04 AJAX form gönderiminde hutk cookie değeri, pageName ve pageUri context olarak gönderilmelidir
  • 05 Conversations chat widget'ı postMessage event'leri ile izlenebilir ve dataLayer'a chat dönüşüm event'leri push edilebilir
Sık Sorulan Sorular (FAQ)
+ HubSpot izleme kodu nasıl kurulur?

HubSpot izleme kodunu body etiketinin hemen öncesine yerleştirin. Kod, Hub ID'ye özel bir JavaScript dosyasıdır (js.hs-scripts.com). WordPress'te footer.php, Shopify'da theme.liquid üzerinden kurulum yapılır. Doğrulama için tarayıcı Network sekmesinden hs-scripts.com isteğini kontrol edin.

+ HubSpot formlarında AJAX ile dönüşüm takibi nasıl yapılır?

HubSpot Forms API endpoint'ine (api.hsforms.com/submissions/v3/integration/submit) portalId ve formId ile POST isteği gönderin. hutk cookie değerini, pageName ve pageUri'yi context olarak eklemeyi unutmayın. Bu yöntem standart embed dışında özel form tasarımlarında kullanılır.

+ HubSpot chat (Conversations) dönüşümlerini nasıl takip ederim?

HubSpot Conversations widget'ı postMessage event'leri gönderir. window.addEventListener ile closed-welcome-message, open-change ve conversationStarted event'lerini yakalayıp dataLayer.push() ile GTM'e aktarabilirsiniz.

+ HubSpot ile GTM entegrasyonu nasıl yapılır?

HubSpot Pages kullanıyorsanız Settings > Tools > Website > Pages > Integrations altından GTM'i doğrudan etkinleştirebilirsiniz. Harici sitelerde Header/Footer HTML alanlarına GTM snippet'larını ekleyin veya kodu doğrudan tema dosyalarına yerleştirin.

hubspot gtm google-analytics

İLGİLİ

gtm

Form ve Webhook Dönüşüm Takibi Rehberi: Kapsamlı Teknik Kılavuz

Web formlarında dönüşüm takibini uçtan uca öğrenin. dataLayer, postMessage, webhook, hidden fields ve GTM entegrasyonu ile form gönderimlerini doğru şekilde takip edin.

28.03.2026
gtm

Typeform Dönüşüm Takibi Rehberi: GTM, Hidden Fields ve CRM Entegrasyonu

Typeform formlarını Google Tag Manager ile entegre ederek dönüşüm takibi yapın, hidden fields ile veri zenginleştirin ve HubSpot gibi CRM sistemlerine aktarın.

27.03.2026
gtm

Tally Form UTM Takibi ve Dönüşüm Rehberi: Hidden Fields, Webhook ve GTM

Tally formlarında UTM parametreleri hidden fields, webhook ve Google Tag Manager ile nasıl izlenir. GA4, Meta Ads ve CRM akışları için tam dönüşüm takibi kurulumu.

27.03.2026