Метка "Google Analytics" | Блог Евгения Жирнова

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

6 декабря 2022 32 #google analytics,#javascript,#seo,#wordpress,#яндекс.метрика

Всем привет! Буду краток:

counters.js

jQuery(document).ready(function($) {
    $.ajaxSetup({cache : true});
 
    // Данные для Google Analytics
    window.dataLayer = [];
    window.gtag = function() {
        window.dataLayer.push(arguments);
    }
 
    $.getScript(
        '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() {
            ym(91531653, "init", {
                    webvisor:true,
                    trackLinks:true,
                    clickmap:true,
                    accurateTrackBounce:false
                }
            );
        }
    );
 
    // Данные для top.mail.ru
    var _tmr = window._tmr || (window._tmr = []);
    _tmr.push({
        id: "2601331",
        type: "pageView",
        start: (new Date()).getTime()
    });
 
    $.getScript('//top-fwz1.mail.ru/js/code.js');
});

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

Задача в crontab

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

Источник вдохновения статья Yandex Metrika: Сторонний код заблокировал основной поток.

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

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

13 июля 2018 129 #facebook,#google analytics,#google+,#php,#seo,#social likes next,#twitter,#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

8 мая 2015 301 #facebook,#google analytics,#google+,#javascript,#php,#seo,#social likes,#twitter,#wordpress,#вконтакте

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

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

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

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

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

Таким образом, для автономного блога остается два варианта: написать код загрузки кнопок самому или воспользоваться готовым рабочим решением, который делает всю работу за вас и при этом не зависит от сторонних сайтов. Именно такой функционал предоставляет скрипт 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 смотрим «Источники траффика->Соцфункции->Плагины».

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

Список постов с меткой "Google Analytics"

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

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

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

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