Cтатистика кликов | PHP

Простой скрипт сбора статистики нажатий на ссылку, кнопку или другой элемент

С помощью скрипта я приняла решение, что на "Шпаргалке блоггера" не нужна кнопка перевода на Английский, поскольку все нажавшие её предпочитают русский язык. Так начиналась моя таблица (под вопросительные знаки убрано часть инфо):

URLПредыдущий URLtitleДата и времяШирина экранаЯзыкIPБраузер
http://shpargalkablog.ru/2012/05/kak-nayti-procent-ot-chisla.html?m=1Как найти процент от числа — Примеры13.10.2015 18:56320ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4??????
http://shpargalkablog.ru/2012/03/gde-luchshe-sozdat-blog.htmlhttps://www.google.ru/Где лучше создать блог. Мой опыт — Примеры14.10.2015 09:301920ru,en;q=0.8??????
http://shpargalkablog.ru/2013/10/how-many-hours.html?m=1http://yandex.ru/touchsearch?text=сколько секунд в пяти с половиной часахКалькулятор (конвертер) часов: сколько часов в секунде | минуте | дне | неделе | месяце | году | веке — Примеры14.10.2015 18:10375ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3??????

О пользователе, нажавшем на кнопку/ссылку/картинку/баннер, можно собрать довольно много информации для анализа. Представленная ниже не исчерпывающая.

показатели
условия

Файл 1.html на сайт.ru

Статистику можно собирать на другом сайте (сайт1.ru). Для "Шпаргалки блоггера", расположенном на Blogger (бесплатный блогохостинг от Google), это единственно возможный вариант: сайт.ru мне нужно заменить на shpargalkablog.ru.

<a href='#' id='mystat'>анкор</a>

<script>
document.getElementById('mystat').addEventListener('click', function(e){  // EventTarget.addEventListener() поддерживается начиная с IE9, его можно заменить на onclick или добавить EventTarget.attachEvent()
 if (window.XMLHttpRequest) {
  e.preventDefault();  // по ссылке нельзя перейти, перенаправление осуществляется с помощью location в событии loadend
  var http = new XMLHttpRequest(), href = this.href;
  http.open('POST', 'http://сайт1.ru/stat.php'); // ВНИМАНИЕ: заменить на свой адрес!
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.timeout = 10000;  // прервать запрос, если он длиться более 10 секунд
  http.addEventListener('loadend', function() { location = href });
  http.send('url=' + location + '&referrer=' + document.referrer + '&title=' + document.title + '&width=' + window.screen.width);
 }
});
</script>

Файл stat.php на сайт1.ru

<?php
header('Access-Control-Allow-Origin: http://сайт.ru');
if (isset ($_POST['url']) && ($_SERVER['HTTP_ORIGIN'] == 'http://сайт.ru')) {
  $data = '<tr><td>' . $_POST['url'] . '<td>' . $_POST['referrer'] . '<td>' . $_POST['title'] . '<td>' . date('d.m.Y H:i', strtotime(' hours')) . '<td>' . $_POST['width'] . '<td>' . $_SERVER['HTTP_ACCEPT_LANGUAGE'] . '<td>' . $_SERVER['REMOTE_ADDR'] . '<td>' . $_SERVER["HTTP_USER_AGENT"];
  file_put_contents('stat.html', $data, FILE_APPEND | LOCK_EX);
}
?>

Файл stat.html на сайт1.ru

<!DOCTYPE html>
<meta charset='utf-8'/>
<meta name="robots" content="noindex"/>
<style>
table {
  counter-reset: schetchik;  /* нумерация строк таблицы */ 
  border-collapse: collapse;
}
table td,
table tbody tr:before {
  padding: .2em;
  border: 2px solid #C0C0C0;
}
table tbody tr {
  counter-increment: schetchik;
}
table tbody tr:before {
  content: counter(schetchik);
  display: table-cell;
  vertical-align: middle;
}
</style>
<table>
<thead>
<tr><td>№<td>URL<td>Предыдущий URL<td>title<td>Дата и время<td>Ширина экрана<td>Язык<td>IP<td>Браузер
<tbody>
<!-- здесь будет список страниц, с которых был совершён переход по ссылке -->

Как подсчитать количество кликов по баннеру и предоставить статистику рекламодателю

Рекламодатель захотел увидеть количество переходов по баннеру, размещённому на "Шпаргалке блоггера". Для подсчёта количества нажатий на кнопку или ссылку можно настроить цель в Яндекс.Метрике или Google Analytics, но там не учитываются посетители, у которых включен AdBlock и ему подобные. А в данном случае их присутствие в статистике очень даже желательно.

условия

Шаг 1. Добавить на все HTML страницы с баннером на сайт.ru

<!-- см. как сделать картинку ссылкой -->

<a href="адрес_сайта_рекламодателя" onclick="Raz(event, this, 1);" rel="nofollow" target="_blank">
    <img src='адрес_баннера'/>
</a>

<script>
function Raz(e, el, n){
  if (window.XMLHttpRequest) {
    e.preventDefault();
    var http = new XMLHttpRequest(), href = el.href;
    http.open("POST", "http://сайт1.ru/raz/stat.php", true);
    http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    http.timeout = 10000;
    http.addEventListener('loadend', function() { location = href });
    http.send("url=" + location + "&title=" + document.title + "&log=" + n);  // передать следующие данные: URL и title страницы, с которой был сделан переход, порядковый номер рекламодателя в массиве
  }
}
</script>

Шаг 2. Создать папку "raz" на сайт1.ru. В ней — два файла

  1. stat.php
    <?php
    header('Access-Control-Allow-Origin: http://сайт.ru');
    
    if (isset ($_POST['log']) && ($_SERVER['HTTP_ORIGIN'] == 'http://сайт.ru')) { // запись в файл при клике по баннеру
    $data = '<tr data-mon="' . date('m.Y', strtotime(' hours')) . '"><td><td>' . date('d.m.Y H:i', strtotime(' hours')) . '<td><a href="' . $_POST['url'] . '">' . htmlspecialchars($_POST['title']) . '</a>';
    file_put_contents($_POST['log'].'.txt', "\xEF\xBB\xBF" . $data, FILE_APPEND | LOCK_EX); // "\xEF\xBB\xBF" для того, чтобы текст кодировался в utf-8
    }
    
    if (isset ($_POST['email'])) { // вывод результата
      $email=array(1 => "name1@yandex.ru", "name2@yandex.ru", "name1@gmail.com"); // электронные адреса рекламодателей
      if (in_array($_POST['email'], $email)) { // если введённый в поле email совпадает с тем, что есть в списке
        echo '<thead><tr><th>№<th>Дата<th>Страница перехода<tbody>' . file_get_contents(array_search($_POST['email'], $email) . '.txt');
      } else {
        echo 'По вашему запросу ничего не нашлось';
      }
    }
    ?>
    
  2. .htaccess
    # запрет на отображение содержимого директории
    Options -Indexes
    # запрет индексации файлов папки
    Header set X-Robots-Tag "noindex, nofollow"
    # заблокировать доступ к TXT файлам
    <Files "*.txt">
    deny from all
    </Files>
    

Шаг 3. На HTML странице сайт.ru разместить следующую форму. Адрес страницы передать рекламодателям. Они смогут увидеть статистику (каждый свою), если введут в форму свой email (электронный адрес).

<!DOCTYPE html>
<meta charset='utf-8'/>
<style>
#adTable {
  counter-reset: schetchik;  /* счётчик строк в рамках таблицы */ 
  border-collapse: collapse;
}
#adTable tr > * {
  border: 1px solid #ccc;
}
#adTable tbody tr {  /* подсчитывается количество строк у tbody */ 
  counter-increment: schetchik;
}
#adTable tbody tr td:first-child:after {  /* значение записывается в первую ячейку строки */ 
  content: counter(schetchik);
}
</style>
<form method="POST" id="ad">
  <input type="email" name="emailAd" required placeholder="Ваш email" x-autocompletetype="email" />
  <select name="monAd">
    <option value="00">За всё время</option>
    <option value="01">Январь</option>
    <option value="02">Февраль</option>
    <option value="03">Март</option>
    <option value="04">Апрель</option>
    <option value="05">Май</option>
    <option value="06">Июнь</option>
    <option value="07">Июль</option>
    <option value="08">Август</option>
    <option value="09">Сентябрь</option>
    <option value="10">Октябрь</option>
    <option value="11">Ноябрь</option>
    <option value="12">Декабрь</option>
  </select>
  <input type="submit" value="показать">
</form>
<table id="adTable"></table>
<style id="adStyle"></style>
<script>
(function(){
var f = document.getElementById('ad');
function Dva(){  // фильтрация по месяцам текущего года
  var mon = f.monAd.options[f.monAd.selectedIndex].value;
  document.getElementById('adStyle').innerHTML = (mon != '00' ? '#adTable tbody tr:not([data-mon="'+mon+'.'+new Date().getFullYear()+'"]) {visibility: collapse;}' : '');
}
f.monAd.addEventListener('change', Dva, false);
f.addEventListener('submit', function(e){
  e.preventDefault();
  var http = new XMLHttpRequest();
  http.open("POST", "http://сайт1.ru/raz/stat.php");
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("email=" + f.emailAd.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      document.getElementById('adTable').innerHTML = http.responseText;
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
  Dva();
}, false);
})()
</script>

Как работает счётчик кликов?

В шаге 1 при щелчке по картинке в файл PHP передаётся порядковый номер рекламодателя в массиве $email:

array(1 => "name1@yandex.ru", "name2@yandex.ru", "name1@gmail.com");

при подсчёте статистики кликов для name1@yandex.ru нужно указать onclick="Raz(event, this, 1);"
при подсчёте статистики кликов для name2@yandex.ru нужно указать onclick="Raz(event, this, 2);"
при подсчёте статистики кликов для name1@gmail.com нужно указать onclick="Raz(event, this, 3);"
и т.д.
Если появляется новый рекламодатель, то достаточно дописать его email последним
array(1 => "name1@yandex.ru", "name2@yandex.ru", "name1@gmail.com", "name1@mail.ru");

В шаге 2 эти данные записываются в файл (если последнего не существует, то он автоматически сам создастся). Тут можно информацию передавать в базу данных (наиболее распространена MySQL) или по ID вычислять город посетителя.

в f t
наверх ↑

2 комментария:

Stanislav Korchagin
Все превосходно работает! Просто божественно, Наталья! И это уже не первая страница, попавшая в немногочисленные закладки, и к которой я вернусь еще не раз... Низкий поклон за труды!
NMitra
Спасибо за комментарий, Станислав, приятно слышать!