JavaScript AJAX Metotu İle HubSpot Form Gönderimi

HubSpot izleme kodu aracılığı ile eğer aksi belirtilmemişse web sitesindeki form hareketlerini de izleyip gönderileri kullanılabilir hale getirebilmekte. Bu web sayfası arayüz değişim sürecinde, önemli gönderi alanları için Typeform öncelikli olacak şekilde bir düzenlemeye, HubSpot kullanımını ise tamamen ortadan kaldırmak yerine izleme ve e-bülten kaydı ile sınırlandırmaya karar verdim. Bunun nedenlerine dair ilerleyen zaman içerisinde ayrıca yazılar yayınlayacağım.

Ana konumuza dönecek olursak, İçerikler sayfasında, orta alanda da görebileceğiniz üzere küçük bir e-bülten kayıt alanı mevcut. Bu küçük form HubSpot form yapısına sahip. Ancak, gönderim yöntemi olarak AJAX tercih ettim¹. Standart formların yapılandırımlası² ve elbette özelleştirilmesi çok fazla müdahale gerektirebiliyor. Bu nedenle, gönderim işlemini Forms API³ yetenekleri çerçevesinde yeniden ele aldım.

İlgili açıklamalarda da görüldüğü üzere, aşağıdaki yapıyı kullanarak POST metotu ile form gönderimlerini HubSpot'a aktarabilmekteyiz.

{
  "submittedAt": "1517927174000",
  "fields": [
    {
      "name": "email",
      "value": "example@example.com"
    },
    {
      "name": "firstname",
      "value": "Jeff"
    }
  ],
  "context": {
    "hutk": ":hutk",
    "pageUri": "www.example.com/page",
    "pageName": "Example page"
  },
  "legalConsentOptions": {
    "consent": {
      "consentToProcess": true,
      "text": "I agree to allow Example Company to store and process my personal data.",
      "communications": [
        {
          "value": true,
          "subscriptionTypeId": 999,
          "text": "I agree to receive marketing communications from Example Company."
        }
      ]
    }
  }
}

Standar bir formu incelediğimizde², form gönderilerinin iletileceği adres tanımını endpoint, portalId ve formId biçiminde görürüz. AJAX gönderilerinde de oluşturduğumuz standart forma ait bu alanları kullanmamız gerekir.

endpoint = "https://api.hsforms.com/submissions/v3/integration/submit",
portalId = <hesap-id>,
formId = <form-id>,

Bu bilgilerin yanı sıra, HubSpot potansiyel müşteri etkinliği takibi için kullanılan hubspotutk çerez değerine de ihtiyacımız olmakta. Standart form sayfasında bu işlem HubSpot tarafından ele alınırken, harici durumlarda ya sabit bir değer kullanmamız ya da çerez içeriğine ulaşmamız gerekir¹ ⁴ ⁵. İzleme kodunu çalıştığı bir form sayfasında, ilgili çerez değerini window.__hsUserToken ile görüntüleyebilirsiniz.

Öncelikle form alanını en yalın hali ile aşağıda örnek olarak iletiyorum.

<form id="hs-newsletter-form">
  <label class="form-label" for="hs-first-name">Ad &amp; Soyad</label>
  <input name="firstname" id="hs-firstname" type="text" />
  <label class="form-label" for="hs-email-address">E-posta</label>
  <input name="email" id="hs-email" type="email" />
  <input type="checkbox" required="" name="privacy" id="hs-privacy" />Gizlilik bildirimini okudum, onaylıyorum.
  <button type="submit" id="hb-submit">Kaydı Tamamla</button>
</form>

İlgili form elemanlarını web sitenize uygun şekilde düzenledikten sonra artık AJAX ile verinin iletileceği kod parçacığını kullanmaya başlayabiliriz.

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

      const gethutk = Object.fromEntries(
        document.cookie.split(/; /).map(c => {
          const [key, v] = c.split('=', 2);
          return [key, decodeURIComponent(v)];
        }),
      );
      const
        name = document.getElementById('hs-firstname'),
        email = document.getElementById('hs-email'),
        jsonString = JSON.stringify({
          "fields": [{
          "name": "firstname",
          "value": (name && typeof(name) !== 'undefined') ? name.value : null
        }, {
          "name": "email",
          "value": (email && typeof(email) !== 'undefined00') ? email.value : null
        }],
        "submittedAt": Date.now(),
        "context": {
          "hutk": gethutk.hubspotutk || "...",
          "pageName": document.title,
          "pageUri": window.location.href
        },
        "legalConsentOptions": {
          "consent": {
            "consentToProcess": true,
            "text": "Gizlilik bildirimini okudum, onaylıyorum"
          }
        }
      }),
      xmlhttp = new XMLHttpRequest(),
      endpoint = "https://api.hsforms.com/submissions/v3/integration/submit",
      portalId = <hesap-id>,
      formId = <form-id>,
      theURL = endpoint + '/' + portalId + '/' + formId;

      if(document.getElementById('hs-privacy').checked === true){
        xmlhttp.open("POST", theURL);
        xmlhttp.setRequestHeader("content-type", "application/json;charset=utf-8");
        xmlhttp.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
            //...
          } else {
            //...
          }
        };
        xmlhttp.send(jsonString);
      }
    });

context nesnesi içeriğinde yer alan hutk görüldüğü üzere çerez içeriğini kontrol etmekte ve eğer bir değer bulamazsa benim "..." olarak belirttiğim, ancak sizin bir form sayfasından çerez kontrolü ve/veya window.__hsUserToken ile alacağınız değeri kullanacaktır. Bu kullanımın dışında, alternatif çözümler de elbette denenebilir⁶ ⁷.

Standart form yapısından ziyade, AJAX kullanımını WordPress, Grav ve benzeri içerik yönetim sistemlerinde shortcode olarak ele alınabileceği için içeriğin ve/veya sayfaların istenen noktasına esneklik bir şekilde yerleştirilebilmekte. Diğer yandan, test sürecini de daha pratik hale getirebilmekte.

JavaScript AJAX Metotu İle HubSpot Form Gönderimi

Forms API ve hubspotutk Kontrolü