Покрокова інтеграція Citadel

Citadel не читає сайт сам — форма повинна надіслати йому дані

3.1 Знайдіть форму та додайте/замініть її на цей HTML

Вставте блок у те місце сторінки, де повинна бути форма. Тексти й CSS-класи можна змінювати, але значення id та name залиште як у прикладі.

<form id="lead-form">
  <input type="hidden" name="click_id" id="click_id">

  <label>
    Ім’я
    <input type="text" name="first_name" required>
  </label>

  <label>
    Телефон
    <input type="tel" name="phone" required>
  </label>

  <label>
    Email
    <input type="email" name="email">
  </label>

  <label>
    <input type="checkbox" name="consent_terms" required>
    Погоджуюся з умовами
  </label>

  <label>
    <input type="checkbox" name="consent_data_processing" required>
    Погоджуюся на обробку персональних даних
  </label>

  <label>
    <input type="checkbox" name="consent_marketing">
    Погоджуюся отримувати маркетингові повідомлення
  </label>

  <button type="submit">Відправити</button>
  <p id="form-message" aria-live="polite"></p>
</form>

3.2 Одразу після форми вставте цей JavaScript

Вам потрібно змінити лише country і language, якщо landing не для Польщі.

<script>
(function () {
  const form = document.getElementById('lead-form');
  const message = document.getElementById('form-message');
  const submitButton = form.querySelector('button[type="submit"]');

  // Беремо click_id з URL і запам’ятовуємо його до відправлення форми.
  const urlClickId = new URLSearchParams(window.location.search).get('click_id');
  if (urlClickId) localStorage.setItem('citadel_click_id', urlClickId);
  document.getElementById('click_id').value =
    urlClickId || localStorage.getItem('citadel_click_id') || '';

  form.addEventListener('submit', async function (event) {
    event.preventDefault();
    submitButton.disabled = true;
    message.textContent = 'Відправляємо…';

    const data = new FormData(form);
    const payload = {
      click_id: data.get('click_id') || '',
      first_name: data.get('first_name'),
      phone: data.get('phone'),
      email: data.get('email') || '',
      country: 'PL',
      language: 'pl',
      consent_terms: data.has('consent_terms'),
      consent_data_processing: data.has('consent_data_processing'),
      consent_marketing: data.has('consent_marketing'),
      consent_source: 'landing-form'
    };

    try {
      // Цей файл створимо на сервері в наступному пункті.
      const response = await fetch('/submit-lead.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const result = await response.json();

      if (!response.ok) throw new Error(result.error || 'Помилка відправлення');

      message.textContent = 'Дякуємо! Заявку прийнято.';
      form.reset();
      localStorage.removeItem('citadel_click_id');
    } catch (error) {
      message.textContent = 'Не вдалося відправити. Спробуйте ще раз.';
      submitButton.disabled = false;
      console.error(error);
    }
  });
})();
</script>

На цьому браузерна частина готова: форма збирає дані, пам’ятає click_id і відправляє все у файл /submit-lead.php на вашому сервері.

Створіть submit-lead.php поруч із сайтом

У кореневій папці landing — зазвичай там, де лежить index.html або index.php — створіть файл submit-lead.php і вставте:

<?php
header('Content-Type: application/json; charset=utf-8');

// ЗМІНІТЬ ТІЛЬКИ ЦІ ДВА ЗНАЧЕННЯ:
$citadelUrl = 'https://YOUR_CITADEL_DOMAIN/api/leads/intake/';
$intakeToken = 'YOUR_CAMPAIGN_INTAKE_TOKEN';

$input = json_decode(file_get_contents('php://input'), true);

if (!is_array($input)) {
    http_response_code(400);
    echo json_encode(['error' => 'Немає даних форми']);
    exit;
}

$payload = [
    'click_id' => $input['click_id'] ?? '',
    'first_name' => $input['first_name'] ?? '',
    'phone' => $input['phone'] ?? '',
    'email' => $input['email'] ?? '',
    'country' => $input['country'] ?? '',
    'language' => $input['language'] ?? '',
    'consent_data_processing' => !empty($input['consent_data_processing']),
    'consent_terms' => !empty($input['consent_terms']),
    'consent_marketing' => !empty($input['consent_marketing']),
    'consent_source' => $input['consent_source'] ?? 'landing-form'
];

$ch = curl_init($citadelUrl);
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_TIMEOUT => 15,
    CURLOPT_HTTPHEADER => [
        'Content-Type: application/json',
        'X-Intake-Token: ' . $intakeToken
    ],
    CURLOPT_POSTFIELDS => json_encode($payload)
]);

$body = curl_exec($ch);
$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$curlError = curl_error($ch);
curl_close($ch);

if ($body === false) {
    http_response_code(502);
    echo json_encode(['error' => 'Citadel недоступний', 'detail' => $curlError]);
    exit;
}

http_response_code($status ?: 502);
echo $body;

Готовий шлях: реклама → Citadel tracker → landing із click_id → форма → submit-lead.php → Citadel Lead Intake.

4.1 Як перевірити без здогадок

1. Відкрийте tracking URL кампанії у звичайному браузері.
2. Після redirect перевірте, що адреса landing містить ?click_id=....
3. Заповніть форму та натисніть «Відправити».
4. Має з’явитися повідомлення «Дякуємо! Заявку прийнято».
5. Відкрийте Admin → Leads: новий лід повинен бути там із Click ID.

curl -X POST 'https://YOUR_DOMAIN/api/leads/intake/' \
  -H 'Content-Type: application/json' \
  -H 'X-Intake-Token: YOUR_CAMPAIGN_TOKEN' \
  -d '{
    "click_id": "CLICK_ID_FROM_URL",
    "first_name": "Anna",
    "phone": "+48123123123",
    "consent_data_processing": true,
    "consent_terms": true,
    "consent_marketing": false
  }'

Важливо: consent_data_processing і consent_terms мають бути true; маркетингова згода передається завжди, але може бути false.