Справочники, инструменты, документация

JavaScript: Скрипт для защиты сайта от ботов

Его главная задача — скрыть счётчики Яндекс.Метрики и Google Analytics от бототрафика, только теперь он это делает на чистом JS, поэтому не требует подключения тяжёлых библиотек.

Как работает скрипт?

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

Если произойдёт какое-либо взаимодействие с окном (клик по кнопке «Принять» или «Закрыть»), то выполнится отложенная загрузка счётчиков Яндекс.Метрики и Google Analytics. А если никакого взаимодействия с окном не будет, значит с большой долей вероятности это робот и коды систем аналитики от него будут скрыты.

Важно! Не используйте всплывающее окно для показа рекламы, перенаправления на другую страницу или на другой сайт.

Как установить скрипт для защиты от ботов на сайт?

  1. Загрузите в корневую папку сайта файл стилей welcome-pt.css, подключите его в конце секции head: <link rel="stylesheet" href="/welcome-pt.css">.

  2. Cкопируйте в корневую папку сайта файл скрипта pts.lazyload.js, подключите его в конце тега body:

class ptsLazyLoad {
    constructor(dataLazyLoadingJS, dataSettings) {
        this.dataLazyLoadingJS = dataLazyLoadingJS;
        this.dataSettings = dataSettings;
    }
    lazyLoadingJS(type, area) {
        if (this.dataLazyLoadingJS['data'][type]['status'] === false) {
            this.dataLazyLoadingJS['data'][type]['status'] = true;

            const render = (relEl, tpl) => {
                const range = document.createRange();
                range.selectNode(relEl);
                const child = range.createContextualFragment(tpl);
                return relEl.appendChild(child);
            };
            render(area, this.dataLazyLoadingJS['data'][type]['html']);
        }
    }
    loadAllDataScripts() {
        for (let key in this.dataLazyLoadingJS['data']) {
            this.lazyLoadingJS(key, document.querySelector(this.dataLazyLoadingJS['data'][key]['area']));
        }
    }
    showMessage() {
        let that = this;
        let modal = document.querySelector('.welcome-pt-overlay');
        let closeButton = document.querySelector('.welcome-pt-close');
        modal.classList.add('is-active');
        closeButton.addEventListener('click', function(event) {    
            event.preventDefault();  
            modal.classList.remove('is-active');
            that.cookieSet();
            that.loadAllDataScripts();
            setTimeout(function() {
                modal.style.display = 'none';
            }, 300);
        });
    }
    isSearchSystemBotSigns() {        
        let uaList = [
            'APIs-Google', 'Mediapartners-Google', 'AdsBot-Google-Mobile', 'AdsBot-Google', 'Googlebot', 'AdsBot-Google-Mobile-Apps',
            'YandexBot', 'YandexMobileBot', 'YandexDirectDyn', 'YandexScreenshotBot', 'YandexImages', 'YandexVideo', 'YandexVideoParser',
            'YandexMedia', 'YandexBlogs', 'YandexFavicons', 'YandexWebmaster', 'YandexPagechecker', 'YandexImageResizer', 'YandexAdNet',
            'YandexDirect', 'YaDirectFetcher', 'YandexCalendar', 'YandexSitelinks', 'YandexMetrika', 'YandexNews', 'YandexCatalog',
            'YandexMarket', 'YandexVertis', 'YandexForDomain', 'YandexSpravBot', 'YandexSearchShop', 'YandexMedianaBot', 'YandexOntoDB',
            'YandexOntoDBAPI', 'YandexVerticals', 'Mail.RU_Bot', 'StackRambler', 'Yahoo', 'msnbot', 'bingbot', 'PixelTools', 'PixelBot'
        ];
        let sBrowser = false, sUsrAg = navigator.userAgent;
        for (let i = 0; i < uaList.length; i += 1) {
            if (sUsrAg.indexOf(uaList[i]) > -1) {
                sBrowser = true;
                break;
            }
        }

        return sBrowser;
    }
    cookieCheck() {
        return document.cookie.indexOf(this.dataSettings.cookie_name) > -1;
    }
    cookieSet() {
        const date = new Date();      
        date.setTime(`${date.getTime()}${(365 * 30 * 24 * 60 * 60 * 1000)}`);      
        let expiryDate = `expiryDate=" ${date.toUTCString()}`;      
        document.cookie = `${this.dataSettings.cookie_name}=true; ${expiryDate}; path=/`;
    }
    simpleCheck(need_check) {
        if (+need_check === 1 && !this.cookieCheck() && !this.isSearchSystemBotSigns()) {
            this.showMessage();
        } else {
            this.loadAllDataScripts();
        }
    }
}
<div class="before-footer-scripts-place"></div>

<div class="welcome-pt-modal">
    <div class="welcome-pt-overlay">
        <div class="site-popup-inner welcome-pt-message">
            <form method="post" enctype="multipart/form-data" action="">
                <div class="site-form-title">Добро пожаловать!</div>
                <div class="site-row">
                    <p class="site-form-text">Благодарим за посещение нашего ресурса.</p>
                </div>
                <div class="site-form-buttons">
                    <div class="site-form-button">
                        <a href="#" class="welcome-pt-close">Продолжить</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/pts.lazyload.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let dataLazyLoadingJS = {
            data: {
                ya_counter: {
                    status: false,
                    html: 'Код счётчика Яндекс.Метрики',
                    area: '.before-footer-scripts-place'
                },
                ga_counter: {
                    status: false,
                    html: `Код счётчика Google Analytics`,
                    area: '.before-footer-scripts-place'
                }
            }
        };
        let dataSettings = {
            cookie_name: 'PST_VERIFIED_COOKIE',
        };
        let LazyLoad = new ptsLazyLoad(dataLazyLoadingJS, dataSettings);
        LazyLoad.simpleCheck(1);
});
</script>
  1. Получите коды счётчиков Яндекс.Метрики и Google Analytics, вставьте их в скрипт:
ya_counter: {
    status: false,
    html: '<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(123456789,"init",{clickmap:true,trackLinks:true,accurateTrackBounce:true, webvisor:true }); <\/script><noscript><div><img src="https://mc.yandex.ru/watch/123456789" style="position:absolute; left:-9999px;" alt="" \/><\/div><\/noscript>',
    area: '.before-footer-scripts-place'
},
ga_counter: {
    status: false,
    html: `<script async src="https://www.googletagmanager.com/gtag/js?id=123456789"><\/script><script>function getCid(){var match=document.cookie.match('(?:^|;)\\\\s*_ga=([^;]*)');var raw=(match)?decodeURIComponent(match[1]):null;if(raw)match=raw.match(/(\\d+\\.\\d+)$/);var gacid=(match)?match[1]:null;return gacid?gacid:false;}<\/script>`,
    area: '.before-footer-scripts-place'
}
Важно! Перед вставкой выполните экранирование слеша, т.е. замените в кодах счётчиков </script> на <\/script>, <alt="" /> на <alt="" \/>, </div> на <\/div>, </noscript> на <\/noscript> и другие \ на \\

Как проверить скрипт?

  1. Откройте консоль в браузере (клавиша F12).

  2. Зайдите на сайт, вы должны увидеть всплывающее окно, а в консоли на вкладке «Network — JS» загрузку скрипта «pts.lazyload.js» со статусом 200.

  3. Кликните на кнопку «Продолжить», окно должно исчезнуть, а в консоли на вкладке «Network — JS» вы должны увидеть загрузку счётчиков Яндекс.Метрики (файл «tag.js») и Google Analytics (файл «js») со статусами 200.

Важно! Статус счётчика в Яндекс.Метрике может быть «Не найден», пугаться не стоит, если скрипт установлен правильно, то данные будут поступать в полном объёме.


© tools.pixelplus.ru