Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг Управление проектами
09 Мар 2023
3 мин
1344

Как добавить на сайт счётчик просмотров

Узнайте, как добавить счётчик просмотров на ваш сайт с помощью сторонних сервисов, PHP и MySQL или JavaScript, и отслеживайте активность пользователей!

Счётчик просмотров — это полезный инструмент для отслеживания количества посещений на вашем сайте. В этой статье мы рассмотрим, как добавить счётчик просмотров на ваш сайт с помощью нескольких методов. 🛠️

1. Использование сторонних сервисов

Самый простой и быстрый способ добавить счётчик просмотров на ваш сайт — использовать сторонние сервисы, такие как Google Analytics или Яндекс.Метрика. Зарегистрируйтесь в сервисе и добавьте код отслеживания на ваш сайт.

Пример кода отслеживания Google Analytics:

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

Пример кода отслеживания Яндекс.Метрики:

<script type="text/javascript">
(function(m,e,t,r,i,k,a){
    m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
    m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXX, "init", {
    clickmap:true,
    trackLinks:true,
    accurateTrackBounce:true,
    webvisor:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/XXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

Не забудьте заменить UA-XXXXX-Y или XXXXX на ваш идентификатор отслеживания.

2. Создание собственного счётчика просмотров с использованием PHP и MySQL

Если вы хотите создать собственный счётчик просмотров, вы можете использовать язык программирования PHP и базу данных MySQL. Ниже приведен пример кода для создания счётчика просмотров с использованием PHP и MySQL.

Создание таблицы в базе данных:

CREATE TABLE `page_views` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `page` VARCHAR(255) NOT NULL,
  `views` INT(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
);

Файл counter.php:

&lt;?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn-&gt;connect_error) {
    die("Connection failed: " . $conn-&gt;connect_error);
}

$page = basename($_SERVER['PHP_SELF']);
$sql = "INSERT INTO page_views (page, views) VALUES ('$page', 1) ON DUPLICATE KEY UPDATE views=views+1";
$conn-&gt;query($sql);

$sql = "SELECT views FROM page_views WHERE page = '$page'";
$result = $conn-&gt;query($sql);
$row = $result-&gt;fetch_assoc();
echo "Просмотров: " . $row['views'];

$conn-&gt;close();
?&gt;

Вставка счётчика просмотров на страницу:

&lt;?php include 'counter.php'; ?&gt;

3. Использование JavaScript для создания счётчика просмотров

Если у вас нет доступа к серверной стороне, вы можете использовать JavaScript и сторонние сервисы, такие как Firebase, для создания счётчика просмотров.

Пример кода с использованием Firebase Realtime Database:

<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-database.js"></script>
<script>
  // Ваша конфигурация Firebase
  var firebaseConfig = {
    apiKey: "your-api-key",
    authDomain: "your-auth-domain",
    databaseURL: "your-database-url",
    projectId: "your-project-id",
    storageBucket: "your-storage-bucket",
    messagingSenderId: "your-messaging-sender-id"
  };
  firebase.initializeApp(firebaseConfig);

  var page = window.location.href;
  var pageViewsRef = firebase.database().ref('page_views/' + btoa(page));

  pageViewsRef.transaction(function(views) {
    return views + 1;
  });

  pageViewsRef.on('value', function(snapshot) {
    document.getElementById('page-views').innerText = 'Просмотров: ' + snapshot.val();
  });
</script>
<div id="page-views">Просмотров: 0</div>

Выберите один из представленных методов и добавьте счётчик просмотров на свой сайт. Теперь вы сможете отслеживать активность пользователей на вашем сайте. Удачи! 🚀

Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
","",""],"correct":1},{"question":"Что нужно сделать, чтобы счётчик просмотров работал с Яндекс.Метрикой?","answers":["Сохранить код без изменений","Заменить идентификатор на свой","Не нужно делать ничего"],"correct":1}]}`; const $wrapper = jQuery('.media-article-test__main'); const { data: testData } = JSON.parse(test_data_json); let current = 0; function showForm() { const input = document.querySelector(".media-article-test__form .media-article-test__form-input--phone"); const iti = window.intlTelInput(input, { initialCountry: "ru", strictMode: true, showSelectedDialCode: true, utilsScript: "https://fastly.jsdelivr.net/npm/intl-tel-input@21.2.7/build/js/utils.js", }); jQuery.validator.addMethod("phoneValid", function () { return iti.isValidNumber() }) const $form = jQuery('.media-article-test__form'); $form.css('display', ''); $form.on('submit', (e) => { e.preventDefault(); }) $form.validate({ rules: { phone: { required: true, phoneValid: true }, email: { required: true } }, messages: { phone: { required: "Телефон обязателен", phoneValid: "Введите корректный телефон" }, email: { required: "Почта обязательна", email: "Введите корректный email" } }, focusInvalid: false, submitHandler: async function (form) { const $phone = $form.find('input[name="phone"]').get(0); const $email = $form.find('input[name="email"]').get(0); const $name = $form.find('input[name="name"]').get(0); const utm_campaign = encodeURIComponent(window.location.href.split('?')[0]) const formData = new FormData(); $name.value && formData.append("name", $name.value); formData.append("email", $email.value); formData.append("phone", window.intlTelInputGlobals.getInstance($phone).getNumber()); formData.append("queryParams", `utm_source=skypro_blog&utm_campaign=${utm_campaign}`); formData.append("sourceKey", "skypro_blog_article_test"); formData.append("funnel", "televox"); formData.append("televox_import_group_id", "9111"); formData.append("autoscoring", true); $form.addClass("media-article-test__form--loading"); try { await fetch('https://api.sky.pro/api/v1/lead/tilda', { method: 'POST', body: formData, }); jQuery('.media-article-test__success').css('display', ''); try { ym(69215599, "reachGoal", "marketing_lead"); ym(69215599, "reachGoal", "send_any_form"); } catch (e) {} // $modalWrap.css("display", "none"); } catch (e) { // $modal.removeClass("spm-voting__modal--loading"); // jQuery(".spm-voting__form-submit-error").css("display", "block"); jQuery('.media-article-test__form-title').text('Ошибка выполнения запроса!'); } finally { $form.removeClass("media-article-test__form--loading"); jQuery('.media-article-test__form-submit').css('display', 'none'); jQuery('.media-article-test__form .iti').css('display', 'none'); jQuery('.media-article-test__form-input[name="name"]').css('display', 'none'); jQuery('.media-article-test__form-input[name="email"]').css('display', 'none'); } } }) const $testBlock = jQuery('.media-article-test__main'); $testBlock.css('filter', 'blur(10px)'); $testBlock.css('background', 'none'); $testBlock.css('pointer-events', 'none'); $form.css('display', ''); jQuery('.media-article-test').css('min-height', '360px'); jQuery('.media-article-test__title').css('display', 'none'); jQuery('.media-article-test__subtitle').css('display', 'none'); } function render() { const { question, answers } = testData[current] $wrapper.html(`
Вопрос ${current + 1}: ${question}
${current + 1} / ${testData.length}
${answers.map(ans => ` `).join('')}
`); jQuery('.media-article-test__answer').click(() => { jQuery($wrapper).fadeOut(300, function() { if (current < testData.length - 1) { current++; render() } else { showForm() } jQuery(this).fadeIn(300); }); }) } render() })

Добавить комментарий