Что, если вы хотите поделиться своими самыми популярными сообщениями в блоге с помощью виджета, который можно разместить на внешних сайтах, будь то блог вашего партнера, главный веб-сайт вашей компании или даже внутренняя панель управления?

Если ваш блог работает на WordPress и вам не нужна особая гибкость, вы можете найти плагин, который подойдет вам. Если ваш блог построен на Gatsby, Jekyll или любой другой платформе, то единственным вариантом может быть создание собственного виджета самостоятельно.

В идеале такой виджет должен быть:

  • легко собрать (без бэкенда!)
  • легко делиться (без серверной части !, без зависимостей, работает везде)
  • быстро (обслуживается из CDN)
  • бесплатно (очевидно)

Одно из решений - отслеживать сообщения в блоге с помощью Google Analytics, а затем использовать его JavaScript Reporting API для получения соответствующей статистики. Однако API требует, чтобы каждый пользователь, читающий статистику, аутентифицировался со своей учетной записью GA. Существуют обходные пути, но они требуют некоторой внутренней работы с вашей стороны.

Технология, которая ставит все флажки, - DataDrivenJS. Как и Google Analytics, DataDrivenJS - это размещенная платформа, которая позволяет отслеживать данные с вашего веб-сайта. Однако его основная цель - дать разработчикам возможность использовать отслеживаемые данные самым простым способом.

Я покажу вам, как вы можете использовать DataDrivenJS для создания виджета, продвигающего ваши популярные сообщения в блоге. Фрагменты, включенные в руководство, требуют, чтобы вы просто заменили некоторые заполнители, но если вы знакомы с JavaScript, вы можете легко его настроить.

Демо

Каждому учебнику нужна демонстрация, не так ли? Вот мой демонстрационный блог - я отслеживаю, какие сообщения там просматривают. Также есть блог моего воображаемого друга, который был настолько любезен, что встроил виджет для продвижения моих постов.

1. Настройте проект DataDrivenJS.

Во-первых, вам нужна учетная запись. Зайдите на сайт DataDrivenJS и зарегистрируйтесь бесплатно.

После входа в систему создайте новый проект. Каждый проект представляет собой отдельную рабочую область для отслеживания и доступа к вашим данным. Через пару секунд вы получите уникальный код отслеживания, содержащий название вашего проекта и ключ:

Скопируйте URL-адрес DD.js из src скрипта - он вам понадобится сейчас.

2. Настройте сценарий отслеживания.

Я подготовил для вас специальный код отслеживания, который автоматически отслеживает необходимые сведения о сообщениях в блоге:

Этот скрипт фиксирует URL, заголовок и URL изображения каждого посещенного сообщения в вашем блоге и вызывает API отслеживания для отправки данных в DataDrivenJS. как метасобытие под названием «статья».

Дополнительные сведения о механизме отслеживания DD.js и API-интерфейсах см. в документации.

Вставьте скрипт в редактор и замените следующие заполнители:

<YOUR UNIQUE TRACKING CODE URL> - Замените его URL-адресом, который вы получили при настройке проекта (см. Шаг 1).

<YOUR POST TITLE SELECTOR> - это селектор элемента заголовка сообщения. Если вы используете Wordpress, замените его на .entry-title. В противном случае попробуйте h1.

<YOUR POST IMAGE SELECTOR> - это селектор для основного изображения публикации, которое будет использоваться в качестве эскиза в нашем виджете. Если вы используете WP, замените его на .wp-post-image, иначе вам нужно будет найти селектор, соответствующий вашему эскизу.

После того, как вы заменили заполнители, ваш скрипт отслеживания готов к размещению в вашем блоге.

3. Добавьте сценарий отслеживания в свой блог.

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

4. Используйте режим разработчика, чтобы проверить, работает ли отслеживание.

Теперь, когда вы добавили скрипт отслеживания, как вы узнаете, что данные отслеживаются правильно?

Вернитесь к консоли DataDriven (DD). Если вы все еще находитесь на экране сценария отслеживания, нажмите [продолжить]. На этом этапе вас могут встретить сообщение «Данные еще нет», но пока не беспокойтесь, данные приходят с задержкой.

Вы можете проверить, отслеживаются ли и какие данные, с помощью режима разработки. Чтобы включить его, выберите «Режим разработки» на консоли DD, он находится в правом верхнем углу, рядом с гамбургер-меню:

Введите URL-адрес любого сообщения в блоге и нажмите «Открыть», сообщение откроется в новой вкладке браузера. Проверьте консоль своего браузера, чтобы увидеть отслеживаемые события через DataDrivenJS.

DataDrivenJS изначально будет собирать некоторые стандартные точки данных для каждой страницы, на которой активировано отслеживание. Если вы прокрутите страницу до конца, вы должны увидеть отслеживаемое мета-событие с именем «blogpost», содержащее заголовок вашего сообщения, URL-адрес и URL-адрес изображения:

Если да, значит, вы правильно реализовали отслеживание.

5. Просмотр отслеживаемых данных

Вам нужно будет подождать, пока истечет срок вашего сеанса (посещения), прежде чем любые данные, отслеживаемые во время этого сеанса, станут доступными в DD Console. Сеанс автоматически завершается из-за бездействия пользователя, но если вы не хотите ждать, запустите:

DD.tracker.stop()

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

Чтобы просмотреть все данные, отслеживаемые на данный момент в вашем проекте, вернитесь в консоль DD и выберите в меню «Отслеживаемые данные». Обязательно выберите в фильтрах вариант «ПОЛЬЗОВАТЕЛЬСКИЙ», чтобы быстро найти метаобытие «статья». Отсюда вы можете быстро просмотреть статистику мероприятия:

6. Виджет

Теперь, когда у нас есть данные, мы можем использовать их для отображения наших лучших сообщений. В приведенном ниже фрагменте показаны пять ваших лучших сообщений в блоге в трех списках: This Week, This Month and All Time - последний показывает данные с того дня, когда вы начали отслеживание, а не дня, когда вы начали свой блог :)

Скопируйте приведенный выше фрагмент и обновите следующие заполнители:

  • установите заполнитель <YOUR CONTAINER SELECTOR> на фактический селектор элемента HTML на странице, на которую вы хотите вставить свой виджет
  • замените <YOUR UNIQUE TRACKING CODE URL> URL-адресом, который вы получили при настройке проекта (см. Шаг 1) - это тот же URL, который вы использовали во фрагменте отслеживания.

Вы также можете обновить styleDef, чтобы стили соответствовали внешнему виду веб-сайта. Конечно, вместо этого вы можете установить стили в своих таблицах стилей.

Теперь, прежде чем вы поделитесь виджетом с кем-либо, вам необходимо разрешить общий доступ к данным.

7. Разрешите публичный доступ к вашим данным.

Все данные, которые вы отслеживаете с помощью DataDrivenJS, по умолчанию являются конфиденциальными, и только вы можете получить к ним доступ. Чтобы сделать некоторые из ваших данных общедоступными - в данном случае пятью самыми популярными сообщениями - вам необходимо сначала прочитать их в режиме разработки.

Откройте Dev Mode в DD Console , но на этот раз введите URL-адрес страницы, на которую вы хотите добавить виджет. Нажмите «Продолжить», и вы попадете на эту страницу.

Если вы еще не добавили виджет на страницу, вставьте фрагмент виджета в консоль браузера и запустите код оттуда.

На этом этапе будет создан общедоступный канал данных с самыми популярными сообщениями блога «На этой неделе». Первый запрос занимает около 20 секунд, но не волнуйтесь, последующие запросы будут выполняться очень быстро.

Вернитесь к консоли DD. Он покажет вам содержимое созданного канала.

8. Планирование обновлений фида данных.

Теперь вам нужно решить, как часто вы хотите обновлять ленту. Поскольку фид содержит данные за текущую неделю, достаточно будет обновлять его один-два раза в день.

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

Вы также можете вручную обновить ленту в любое время, щелкнув значок с кружащимися стрелками (рядом со значком календаря).

9. Удаление зависимости DD.js из виджета

Этот шаг не является обязательным, но рекомендуется. Код виджета динамически загружает библиотеку DD.js для создания запроса, который будет создавать и читать потоки данных со статистикой. Однако после создания каналов мы можем отказаться от DD.js и использовать «ванильный» JavaScript для чтения данных. Это избавит пользователей от загрузки лишних килобайт.

Все, что вам нужно сделать, это скопировать ключ публичного фида данных из консоли DD и использовать его для замены заполнителя <YOUR DATA FEED PUBLIC KEY> во фрагменте виджета.

10. Подготовьте каналы данных для списков «За месяц» и «За все время».

Пока мы подготовили потоки данных для списка «На этой неделе», и нам нужны еще два. Вернитесь на страницу со встроенным виджетом - вы все еще должны быть в режиме разработки - и нажмите «В этом месяце». Через несколько мгновений канал будет создан. Повторите шаги 8. и 9., как описано выше. Затем нажмите «Все время» в виджете и снова повторите шаги 8. и 9.

11. Делитесь своими сообщениями

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

Вы можете легко изменить виджет для создания более сложных списков. Вы также можете создавать отдельные списки для мобильных и настольных компьютеров или фильтровать списки по автору, категории или ключевым словам. Если вы хотите внести какие-либо изменения, дайте мне знать в комментариях - я постараюсь помочь.

Спасибо!