Методы фиксации событий на индексной странице с PHP и JavaScript

Раздел: Веб-аналитика -> Веб-аналитика

Отслеживание кликов по index.php

Как передать данные о клике на сервер без перезагрузки страницы?

Наиболее эффективное решение использует JavaScript для отправки AJAX запроса на серверный скрипт PHP, который сохраняет информацию в базу данных или файл. Этот подход позволяет отслеживать любые клики на индексной странице в реальном времени, не влияя на пользовательский опыт.

Пример реализации:


// JavaScript (файл track.js)
document.addEventListener('click', function(event) {
  const target = event.target;
  // Проверяем, что клик по ссылке или по области страницы
  if (target.tagName === 'A' || target.closest('.trackable')) {
    const data = {
      url: window.location.href,
      element: target.outerHTML,
      timestamp: Date.now()
    };
    fetch('/track.php', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
    }).then(response => console.log('Track sent')).catch(err => console.error(err));
  }
});

Index php click (клик по индексной странице php)


// PHP (track.php)
<?php
$input = json_decode(file_get_contents('php://input'), true);
if ($input) {
  $log = date('Y-m-d H:i:s') . ' | ' . $input['url'] . ' | ' . $input['element'] . PHP_EOL;
  file_put_contents('clicks.log', $log, FILE_APPEND | LOCK_EX);
  http_response_code(200);
  echo json_encode(['status' => 'ok']);
} else {
  http_response_code(400);
}
?>

Типичные ошибки:

  • Ошибка CORS, если скрипт находится на другом домене. Решение: настроить заголовки Access-Control-Allow-Origin.
  • Блокировка браузером смешанного контента (HTTP/HTTPS).
  • PHP скрипт не имеет прав на запись в файл. Необходимо установить права 755 или 644.
  • Отсутствие проверки на CSRF. Для защиты добавить токен.

Как записывать клики в текстовый лог без AJAX?

Можно использовать перенаправление через отдельный PHP скрипт. Например, ссылка вида /click.php?target=index.php. Скрипт записывает клик и перенаправляет на целевую страницу.


// click.php
<?php
$target = $_GET['target'] ?? 'index.php';
$log = date('Y-m-d H:i:s') . ' Клик по ' . $target . PHP_EOL;
file_put_contents('clicks.log', $log, FILE_APPEND);
header('Location: ' . $target);
exit;
?>

Использование в HTML: <a href='/click.php?target=index.php'>Перейти на главную</a>. Недостаток: теряется информация о клиенте без дополнительных параметров.

Проблемы: возможна редирект петля, если target указывает на скрипт; не подходит для отслеживания кликов по элементам на странице; увеличивает время загрузки.

Как отправить событие в Google Analytics при клике на index.php?

Используется Google Analytics 4 через gtag.js. В обработчике клика вызывается gtag('event', 'click', {...}).


<script async src='https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX'></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');

  document.addEventListener('click', function(e) {
    if (e.target.tagName === 'A' && e.target.href.includes('index.php')) {
      gtag('event', 'click_index', {
        'event_category': 'navigation',
        'event_label': window.location.pathname
      });
    }
  });
</script>

Ошибки: отсутствие аккаунта GA или неправильный идентификатор; блокировка скриптов рекламными блокировщиками.

Как использовать серверные логи веб-сервера для анализа кликов?

Каждый запрос к index.php фиксируется в access.log сервера Apache или Nginx. Можно анализировать эти логи с помощью инструментов вроде GoAccess или awstats. Однако это фиксирует только загрузку страницы, а не отдельные клики.


# Просмотр записей об index.php в логе Apache
grep 'GET /index.php' /var/log/apache2/access.log | head -10

Для отслеживания кликов по элементам этот метод не подходит.

Недостатки: не различает клики и обычные переходы; нет данных о действиях после загрузки страницы; требует дополнительной обработки.

Расширенные примеры отслеживания кликов по index.php

Далее приведены детальные примеры с кодом и результатами.

Пример 1: Запись клика в MySQL с защитой CSRF

Пример 

// JavaScript с токеном
fetch('/track.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
  },
  body: JSON.stringify({
    action: 'click_index',
    page: window.location.pathname,
    timestamp: Date.now()
  })
}).then(r => r.json()).then(d => console.log(d)).catch(e => console.error(e));
Пример 

// PHP track.php с MySQL
<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] !== 'POST') exit;
$headers = getallheaders();
$csrf = $headers['X-CSRF-Token'] ?? '';
if ($csrf !== $_SESSION['csrf_token']) {
  http_response_code(403);
  echo json_encode(['error' => 'Invalid token']);
  exit;
}
$input = json_decode(file_get_contents('php://input'), true);
$pdo = new PDO('mysql:host=localhost;dbname=analytics', 'user', 'pass');
$stmt = $pdo->prepare('INSERT INTO clicks (page, timestamp, user_ip) VALUES (?, ?, ?)');
$stmt->execute([$input['page'], date('Y-m-d H:i:s', $input['timestamp']/1000), $_SERVER['REMOTE_ADDR']]);
echo json_encode(['status' => 'ok']);
?>

// Результат (ответ сервера)
{"status":"ok"}

Пример 2: Использование WebSocket для передачи клика в реальном времени

Пример 

// Клиент (JavaScript)
const ws = new WebSocket('wss://example.com/ws');
ws.onopen = function() {
  document.addEventListener('click', function(e) {
    ws.send(JSON.stringify({
      type: 'click',
      target: e.target.outerHTML,
      url: location.href
    }));
  });
};
// Сервер (PHP с Ratchet)
// ... (код для сервера WebSocket)

Результат: данные появляются на сервере мгновенно, но требуется поддержка WebSocket и демона.

Пример 3: Отправка события в Google Analytics через Measurement Protocol (из PHP)

Пример 

// PHP отправляет POST запрос к Google Analytics
$client_id = 'XXXXX'; // из cookie _ga
$measurement_id = 'G-XXXXXXXXXX';
$api_secret = 'YOUR_SECRET';
$payload = [
  'client_id' => $client_id,
  'events' => [
    [
      'name' => 'click_index',
      'params' => [
        'page_location' => 'https://example.com/index.php'
      ]
    ]
  ]
];
$ch = curl_init('https://www.google-analytics.com/mp/collect?measurement_id='.$measurement_id.'&api_secret='.$api_secret);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($payload));
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
$response = curl_exec($ch);
curl_close($ch);

// Ответ (пустой 204 при успехе)

Пример 4: Асинхронная запись в очередь сообщений (RabbitMQ) для обработки

Пример 

// PHP producer
$connection = new AMQPStreamConnection('localhost', 5672, 'guest', 'guest');
$channel = $connection->channel();
$channel->queue_declare('click_queue', false, true, false, false);
$msg = new AMQPMessage(json_encode(['page' => 'index.php', 'ip' => $_SERVER['REMOTE_ADDR']]));
$channel->basic_publish($msg, '', 'click_queue');
$channel->close();
$connection->close();
// Результат: сообщение отправлено, обработка отложена.

Клик по индексной странице PHP - comments

En
Index php click (php)