Отслеживание печати страниц с помощью Яндекс.Метрики

Зачем?

Найти страницы, которые посетители распечатывают на сайте, чтобы потом сделать для этих страниц версию для печати.

Установка кода

  1. Создаём счётчик в Яндекс.Метрике.
  2. Вставляем отслеживающий код из этой статьи в HTML-код своей страницы (можно вынести в отдельный js-файл).
  3. Не забываем поменять в отслеживающем коде 123456 на свой номер счётчика Яндекс.Метрики.

Отслеживающий код


/* Отслеживание печати страницы с помощью Яндекс.Метрики
   http://webfilin.ru/notes/track_print */
(function() {
    if (window.addEventListener) {
        window.addEventListener('load', trackPrint, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onload', trackPrint);
    }
    
    function trackPrint() {
        var counterId = 123456, // номер счётчика Яндекс.Метрики
            divId = 'ym-track-print' + counterId,
            div = document.createElement('div'),
            style = document.createElement('style'),
            url = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//mc.yandex.ru/metrika/' + counterId + '/';
            body = document.getElementsByTagName('body')[0],
            cssText = '#' + divId + '{display:block !important; background:url(' + url + ') transparent center center no-repeat !important;left:50% !important;top:50% !important;width:10px !important;height:10px !important;z-index:9999 !important}';

        style.media = 'print';
        style.type = 'text/css';
        
        if (style.styleSheet) { // IE
            style.styleSheet.cssText = cssText;
        } else if (/AppleWebKit\//.exec(navigator.userAgent)) { // Safari, Chrome
            style.innerText = cssText;
        }
        else {
            style.innerHTML = cssText;
        }

        div.id = divId;
        div.setAttribute('style', 'position:absolute;left:-9999px;display:none');

        if (body) {
            body.appendChild(div);
            body.appendChild(style);
        }
    }
})();

Принцип работы

  1. Динамически создаём на странице скрытый элемент с фоновой картинкой //mc.yandex.ru/watch/123456, которая в коде счётчика Яндекс.Метрики указана в теге <noscript>.
  2. Создаём тег style с атрибутом media="print".
  3. Элемент с фоновой картинкой отображается только при печати страницы.

Поддержка в браузерах

Mozilla Firefox, Google Chrome, Safari, Opera и Internet Explorer.

© Селезнёв Д. Л. 2012
Электронная почта: info@webfilin.ru