Загрузка разных счётчиков с помощью jQuery.getScript() без плагинов WordPress

Всем привет! Иногда бывает, что счётчики Google Analytics, Яндекс.Метрика и счётчик mail.ru тормозят загрузку основной страницы. Написал js скрипт для того, чтобы это избежать.

jQuery(document).ready(function($) {
    $.ajaxSetup({cache : true});

    // Данные для Google Analytics
    window.dataLayer = [];
    window.gtag = function() {
        window.dataLayer.push(arguments);
    }

    $.getScript(
        // !! ОБЯЗАТЕЛЬНО ЗАМЕНИТЕ ИДЕНТИФИКАТОР GOOGLE ANALYTICS "G-41BWRDZLG5" НА СВОЙ !!
        'https://www.googletagmanager.com/gtag/js?id=G-41BWRDZLG5',
        function() {
            gtag('js', new Date());
            gtag('config', 'G-41BWRDZLG5');
        }
    );

    // Данные для Яндекс.Метрики
    window.ym = function() { (window.ym.a||[]).push(arguments); }
    window.ym.l = 1*new Date();

    $.getScript(
        'https://mc.yandex.ru/metrika/tag.js',
        function() {
            // !! ОБЯЗАТЕЛЬНО ЗАМЕНИТЕ ИДЕНТИФИКАТОР ЯНДЕКС МЕТРИКИ "91531653" НА СВОЙ !!
            ym(91531653, "init", {
                    webvisor:true,
                    trackLinks:true,
                    clickmap:true,
                    accurateTrackBounce:false
                }
            );
        }
    );

    // Данные для top.mail.ru
    var _tmr = window._tmr || (window._tmr = []);
    _tmr.push({
        // !! ОБЯЗАТЕЛЬНО  ЗАМЕНИТЕ ИДЕНТИФИКАТОР MAIL.RU "2601331" НА СВОЙ !!
        id: "2601331",
        type: "pageView",
        start: (new Date()).getTime()
    });

    $.getScript('//top-fwz1.mail.ru/js/code.js');
});

Известная бага счётчика Яндекс.Метрика — замедление сайта, поэтому скачал его локально в папку [wordpress_folder]/metrika и добавил в задачу в crontab для обновления этого файла каждый час, Затем заменил https://mc.yandex.ru/metrika/tag.js в скрипте выше на /metrika_tag.js.

@hourly curl -s https://mc.yandex.ru/metrika/tag.js -o [wordpress_folder]/metrika_tag.js

Источник вдохновения статья Yandex Metrika: Сторонний код заблокировал основной поток. Не забудьте поменять идентификаторы счётчиков и проверить, что tag.js доступен по адресу [ваш сайт]/metrika/tag.js, если вы решили воспользоваться ускорением загрузки счётчика.

Чтобы добавить загрузку счётчиков в WordPress, необходимо положить его содержимое в файлик wordpress/wp-content/themes/[ваша_тема]/js/counters.js и добавить следующий код в wordpress/wp-content/themes/[ваша_тема]/functions.php:

functions.php (для всех пользователей)

function enqueue_counter() {
  // Регистрируем скрипт
  wp_register_script('counters', get_template_directory_uri() . '/js/counters.js', array('jquery'), false, true);
    
  // Загружаем скрипт
  wp_enqueue_script('counters');
}
add_action('wp_enqueue_scripts', 'enqueue_counters');

Я использую проверку, что пользователь не авторизован, зачем мне отслеживать самого себя:

functions.php (только для неавторизованных пользователей)

function enqueue_counter() {
  // Регистрируем скрипт
  wp_register_script('counters', get_template_directory_uri() . '/js/counters.js', array('jquery'), false, true);
    
  // Загружаем скрипт, если пользователь неавторизован
  if (!is_user_logged_in()) {
    wp_enqueue_script('counters');
  }
}
add_action('wp_enqueue_scripts', 'enqueue_counters');

Добавляем Social Likes Next на сайт с WordPress

В прошлой заметке я рассказывал как добавить Social Likes на сайт с WordPress, с тех пор прошло много времени и появилась новая версия Social Likes под названием Social Likes Next. Отличается от предыдущей тем, что иконки теперь в SVG формате и для работы не требуется загрузка jQuery.

Шаг первый (скачиваем скрипт и файл стилей)

Скачиваем social-likes.min.js, например отсюда или отсюда в папку js вашей темы.

Скачиваем social-likes_flag.css, например отсюда или отсюда в папку css вашей темы.

Шаг второй (подключаем файл стилей и скрипт)

В файле functions.php вашей темы вставляем следующие строки

function b2k_enqueue_js_and_css() {
    wp_register_script(
        'social-likes',
        get_stylesheet_directory_uri() . 'js/social-likes.min.js',
        array(),
        false,
        true);

    wp_enqueue_script('social-likes');

    wp_register_style(
        'social-likes',
        get_stylesheet_directory_uri() . 'css/social-likes_flat.css');

    wp_enqueue_style('social-likes');
}

add_action('wp_enqueue_scripts', 'b2k_enqueue_js_and_css');

Шаг третий (добавляем кнопки в конце каждого поста)

Вставляем данный скрипт в functions.php

function b2k_social_likes($content='') {
    global $post;

    $buttons = array();
    $buttons['vk'] = '<div data-service="vkontakte" title="Поделиться ВКонтакте"></div>';
    $buttons['fb'] = '<div data-service="facebook" title="Поделиться в Facebook"></div>';
    $buttons['twitter'] = '<div data-service="twitter" title="Поделиться в Twitter"></div>';
    $buttons['plusone'] = '<div data-service="plusone" title="Поделиться в Google+"></div>';
    $buttons['ok'] = '<div data-service="odnoklassniki" title="Поделиться в Одноклассниках"></div>';
    $buttons['telegram'] = '<div data-service="telegram" title="Поделиться в Telegram"></div>';
    $buttons['linkedin'] = '<div data-service="linkedin" title="Поделиться в LinkeIn"></div>';
    $buttons = implode('', $buttons);

    $tags = array();
    $tags['class'] = 'class="social-likes"';
    $tags['data-title'] = 'data-title="' . $post->post_title . '"';
    $tags['data-url'] = 'data-url="' . get_permalink($post->ID) . '"';
    $tags = implode(' ', $tags);

    $main = '<div ' . $tags . '>';
    $main .= $buttons;
    $main .= '</div>';

    $content .= $main;

    return $content;
}
add_filter('the_content', 'b2k_social_likes');

Шаг четвертый (добавляем отслеживание Google Analytics)

jQuery(window).load(function() {
    jQuery('.social-likes__icon').css('pointer-events', 'none');
    jQuery('.social-likes__widget').click(function(e) {
        var service = jQuery(e.target).attr('data-service');
        var parent = jQuery(e.target).parent();
        var url = parent.attr('data-url');
        var title = parent.attr('data-title');
        gtag('event', 'share', {
            'service' : service,
            'location' : url,
            'title' : title
        });
    });
});

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

Добавляем Social Likes на сайт с WordPress

В этой заметке я расскажу — как поставить себе на сайт скрипт Social Likes, который отображает кнопки социальных сетей.

Поскольку мой блог работает стабильно, настало время в очередной раз оптимизировать скорость загрузки.

Основная причина тормозов во время загрузки поста была в опросе всех социальных сетей, кнопки которых у меня были добавлены на сайте. Способ добавления кнопок был описан мною ранее в статье «Добавляем кнопки «Мне нравится» от Facebook, ВКонтакте, Twitter и Google+».

Если вы хотите добавить кнопки социальных сетей на сайт — выбор огромен! Это может быть кнопка «Поделиться» от компании Яндекс, блок кнопок ShareThis — тысячи их.

Во всех этих решениях есть один фатальный недостаток — они зависят от сторонних сайтов. Если сайт, который предоставляет кнопку, ляжет, то вместе с ним накроется и ваш блог (как минимум — будут тормоза при открытии страниц).

Таким образом, для автономного блога остается два варианта: написать код загрузки кнопок самому или воспользоваться готовым рабочим решением, который делает всю работу за вас и при этом не зависит от сторонних сайтов. Именно такой функционал предоставляет скрипт Social Likes.

Поехали!

Настраиваем внешний вид кнопок в конструкторе Social Likes:

Конструктор Social Likes

Для эстетов есть вариант конструктора на английском.

Затем скачиваем архив со скриптом и нужным вам файлом стилей. В архиве уже есть готовый index.html с примером, так что, если вам все понятно, можете дальше не читать.

Загружаем social-likes.min.js и файл стилей в папочку с темой и добавляем в functions.php вашей темы вот такой код:

function enqueue_social_likes() {
    $uri = get_stylesheet_directory_uri();

    // Регистрируем скрипт и указываем, что он зависит от jQuery
    wp_register_script('social-likes', $uri . '/social-likes.min.js', array('jquery'));
    // Регистрируем файл стилей
    wp_register_style('social-likes', $uri . '/social-likes_birman.css');

    // Если это страница с постом
    if (is_singular()) {
        // Вставляем скрипт в код страницы
        wp_enqueue_script("social-likes");
        // Вставляем файл стилей в код страницы
        wp_enqueue_style("social-likes");
    }
}
// Добавим вызов нашей функции во время инициализации скриптов
add_action('wp_enqueue_scripts', 'enqueue_social_likes');

Затем в single.php вашей темы добавляем вот такой блок:

<div class="social-likes">
    <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
    <div class="twitter" data-via="koryakokot" title="Поделиться ссылкой в Твиттере">Twitter</div>
    <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
    <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

После всех этих манипуляций вам наверняка захочется узнать — насколько часто посетители сайта кликают по этим кнопкам. К счастью Social Likes поддерживает событие popup_opened.social-likes, которое вызывается каждый раз, когда открывается окно «Поделиться». Добавляем вот такой код в footer.php вашей темы (сразу после вызова wp_footer()):

<script type="text/javascript">
jQuery('.social-likes').on('popup_opened.social-likes', function(event, service, win) {
    ga('send', 'social', service, 'share', location.href);
});
</script>

После этого заходим в Google Analytics смотрим «Источники траффика->Соцфункции->Плагины».

Если вам понравилась данная заметка, теперь вы можете поделиться ею в социальных сетях.

Блог Евгения Жирнова