Кооперируем группу ВК и сайт

Автор: maximus. Posted in Темы, идеи

На чём стояла и стоит сила “сеошная”? На ссылках, так было, так будет… Будет ли? ПС всё больше усложняют алгоритмы, способности к отслеживанию пользователей растут, растут и вычислительные мощности. Что всё это значит? А это значит, что ПС далее будут учитывать всё больше факторов, выдвигая на первый план анализ поведения пользователя на сайте. Поведенческие факторы будут только усиливать своё влияние со временем, что, по идее, приведет к учёту рекомендаций пользователей, а не рекомендаций сайтов доноров.

Об улучшении ПФ сегодня и поговорим. Уже много лет социальные кнопки используются вебмастерами для привлечения социального трафика, а в свете эволюции ПС социальная активность становится одним из важных ПФ на сайте. Какие способы увеличения социальной активности используются?

1. Простое размещение социальных кнопок типа – нравится, поделиться, добавить в избранное.

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

Минусы метода: низкий CTR, занимает место которое могла бы занять реклама

2. Размещение виджета сообщества на сайте – вступите в группу, подпишитесь на новости.

Плюсы метода: красиво, привлекает пользователя сообществом

Минусы метода: низкий CTR, занимает место которое могла бы занять реклама

3. Социальная оплата – пользователь может увидеть некий скрытый контент только после того как нажмёт поделиться, нравится и т.п.

Плюсы метода: высокий CTR в случае полезных материалов

Минусы метода: большое количество отказов, навязчивость

Сегодня мы рассмотрим вариант, который совмещает в себе первый, второй и третий методы, при этом лишён вышеуказанных недостатков.

Чтобы подогреть интерес покажу вот такой график статистики вступления в группу ВКонтакте:

Рост регистраций ВК

До февраля на сайте использовался метод 2 – размещение виджета группы, с начала февраля комбинированный метод. Как видим рост количества вступивших в 4-5 раз.

Что же это за метод?

Всё просто – всплывающий поп-ап (pop-up) с виджетом и прочими прелестями.

О чем собственно речь?

Наверняка многие видели подобные всплывающие окна, организованные на различных сайтах СМИ. Но наше окно не такое, оно лучше )

Рассмотрим пример организации такого поп-апа на группе ВК. Итак, чтобы использовать этот способ вам понадобится:

  1. Сайт с некоторой естественной посещаемостью
  2. Группа ВК, которую вы хотите ассоциировать с сайтом
  3. Небольшие знания программирования
  4. Данный материал/инструкция

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

Наш скрипт обладает следующими преимуществами:

  1. Независимость от используемой CMS. Будь то WP, Joomla или DLE, или даже сайт на чистом HTML вы можете использовать этот метод, лишь бы был доступ к исходному коду сайта
  2. Ненавязчивость для пользователя – показ поп-апа управляется пользовательскими cookies’ами и вы можете сами настроить, как часто показывать пользователю поп-ап и как реагировать на его действия.
  3. Поп-ап показывается по задержке и, таким образом, вы можете показать его не всем подряд, а только лояльным посетителям, которые  задержались на странице для чтения, соответственно высока вероятность их социального отклика.

В результате исполнения скрипта на вашем сайте может появится вот такой симпатичный поп-ап:

пример pop-up окна, которое увидит пользователь

Итак, цели намечены, результаты необходимы, вы готовы? Тогда поехали!

Подключаем внешние библиотеки

Для оформления красивого поп-апа и всей прочей “магии” нам потребуется несколько библиотек. Прежде всего библиотека JQuery, пара расширений для неё и библиотека API ВКонтакте. Здесь я прошу неизбалованных программированием вебмастеров не пугаться страшных названий, ничего сложного в этом и в дальнейшем нет, просто делаем по инструкции. Для “тру” вебмастеров, которые сами могут написать подобный скрипт на чистом JS эта статья в целом бесполезна, поэтому сильно не критикуйте.

Подключаем библиотеки, для этого в разделе <head>...</head> сайта разместим следующий строки:

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>

<script src="/js/jquery.bpopup.min.js" type="text/javascript"></script>

<script src="/js/jquery.cookie.js" type="text/javascript"></script>

<script src="//vk.com/js/api/openapi.js?110" type="text/javascript"></script>

Обратите внимание, в корневом каталоге сайта вам нужно создать папку “js” и в ней разместить файлы “jquery.bpopup.min.js” и “jquery.cookie.js”.

Что это и для чего надо?

Первой строкой подключаем библиотеку JQuery на которой и будет делать скрипт. Второй строкой подключаем модуль поп-ап для JQuery, третей строкой подключаем модуль для работы с кукисами, четвертой строкой подключаем API вконтакте. Ничего лишнего, только проверенные источники – Google, VK, Github.

Теперь, когда необходимые библиотеки подключены перейдем непосредственно к скриптам.

Подключаем скрипты к коду сайта

Сразу после старта тега <body> размещаем следующий код:

<!-- init VK API + some javascript -->
<script type="text/javascript">

VK.init({  // инициализируем API вконтакте
apiId: 4166758  // тут должен стоять ваш apiId, об этом ниже
});
//-----------------
function setcookie(name, value, expires, path, domain, secure) // функция установки кукисов
{
 document.cookie = name + "=" + escape(value) +
 ((expires) ? "; expires=" + (new Date(expires)) : "") +
 ((path) ? "; path=" + path : "") +
 ((domain) ? "; domain=" + domain : "") +
 ((secure) ? "; secure" : "");
} // конец функции установки кукисов
</script>

<!-- popup jQuery -->// секция JQuery скрипта
<script>
(function($) {
 function Nya(){  // сама функция обработки события готовности страницы в браузере, она делает основную работу
  var date = new Date();
  var minutes = 1440; // 1440 – число минут, которое будет жить кукис-отметка, что пользователь выидел поп-ап, показываем попап человеку не чаще 1 раза в сутки
  date.setTime(date.getTime() + (minutes * 60 * 1000)); // готовми дату истечения кукиса-отметки
  $.cookie("isawNya", "1", { expires: date, path: "/", domain: "YOURDOMAIN.RU" }); // устанавливаем кукис-отметку, пользователь видел поп-ап!
  $('#element_to_pop_up').bPopup(); // показываем поп-ап
}

// DOM Ready

 $(function() { // эта функция исполняется автоматически по готовности html страницы у пользователя
  if(!$.cookie("isawNya")) // проверяем, видел ли пользователь куку?
  setTimeout(Nya, 120000); // если нет, то через 2 (120 000 миллисекунд) минуты запускаем вышеописанную функцию function Nya()
 });
})(jQuery);
</script>

Кратко суть вышеописанного кода, кто не понял из комментариев – по готовности страницы проверяем, есть ли у пользователя отметка что он видел поп-ап, если отметка есть, то и фиг с ним, а если отметки нет, то через 2 минуты покажем ему поп-ап, если конечно он досидит на странице.

В данном коде можно менять 2 цифры, первая 1440 – число минут, которые пользователь помечен как видевший поп-ап. Эта задержка предохраняет пользователя от многократного просмотра поп-апа. В течение этих 1440 минут пользователь не увидит поп-ап, если видел его уже. Вторая цифра 120 000 миллисекунд – время, которое пользователь должен провести на странице, чтобы увидеть поп-ап. Ставите 30 000 – пользователь увидит поп-ап через 30 секунд. Ставите 300 000 – через 5 минут. Рекомендую выставлять этот параметр чуть выше, чем среднее время пребывания на сайте по статистике. Таким образом поп-ап увидят именно те, кому сайт понравился.

Получаем API ID

Теперь касательно apiId (API ID). Что это такое? Ниже в коде самого поп-апа нам потребуется определить, нажал пользователь лайк и вступил ли в группу? Что бы ответить на этот вопрос надо обратится к серверу ВКонтакте, а сервер ВКонтакте не доверяет всем подряд, а доверяет только зарегистрированным приложениям. Вот этот apiId  и говорит ВК, кто это к нему “стучится”. Получить его просто.

Проходите на страницу http://vk.com/dev/Like

В выпадающем списке выбираете “Подключить новый сайт”

получаем apiId вконтакте

Заполняете поля формы:

получаем apiId вконтакте

После нажатия кнопки “Сохранить” вводите капчу и ниже в окне видите свой apiId для сайта (в моём случае 4166758).

получаем apiId вконтакте

Теперь Ваш сайт может обращаться к API ВКонтакте.

Разобрались, двигаемся дальше, сейчас нам необходимо подготовить блок <div> содеражщий в себе тот самый поп-ап.

Оформляем всплывающий поп-ап

У меня этот <div> сделан вот так.

<div id="element_to_pop_up" style="display: none; border: black 1px solid; margin: 10px; background-color: white; padding: 20px; text-align: center; box-shadow: 0 0 20px 5px;">
<b>Некоторый текст</b>, для привлечения внимание пользователя к кнопе лайк <br>
<div style="margin: 0 auto;" id="vk_like"></div><br>
а тут для привлечения внимания к группе!<br><br>
<!-- VK Widget -->
<div style="margin: 0 auto;" id="vk_groups_popup"></div>
<script type="text/javascript">// это виджет группы как его получить см. ниже
 VK.Widgets.Group("vk_groups_popup", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 45211301);
</script>

<!-- VK Vidgets -->
<script type="text/javascript">
 VK.Widgets.Like("vk_like", {type: "button"}); //это виджет кнопки лайк, как его получить смотри ниже
 VK.Observer.subscribe("widgets.like.liked", function f() // это подписка на событие – пользователь нажал лайк
 {// month cookie
  setcookie('isawNya', '1', (new Date).getTime() + (30 * 24 * 60 * 60 * 1000),'/'); // если пользователь нажал лайк, мы ставим ему кукис-метку на месяц
 });

 VK.Observer.subscribe("widgets.groups.joined", function f() // это подписка на событие – пользователь вступил в группу
 {// 5 years cookie 
  setcookie('isawNya', '1', (new Date).getTime() + (5 * 365 * 24 * 60 * 60 * 1000), '/'); // если вступил в группу он получает кукис-метку на 5 лет
 });
</script>
</div>

Что тут происходит? В этом диве мы показываем виджет кнопки лайк и виджет группы, а затем следим за поведением пользователя. Поведение пользователя нам сообщает ВК, именно для этого выше мы подключали API ВКонтакте и получали apiId. Если пользователь нажал лайк – мы помечаем его кукисом на месяц, в течение месяца он не увидит больше поп-ап. Если пользователь вступил в группу – мы помечаем его кукисом на 5 лет. Фактически больше мы ему поп-ап не покажем совсем.

Что бы получить виджет группы идём по этому адресу: http://vk.com/dev/Community , там всё доступно – указываем URL вашей группы ВК, настраиваем внешний вид и копируем полученный код.

Что бы получить виджет кнопки лайк идем по этому адресу: http://vk.com/dev/Like , мы там уже были. Выбираем зарегистрированное приложение, настраиваем внешний вид кнопки, копируем полученный код.

Из скопированного кода виджетов удаляем такой кусок:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?110"></script>

 поскольку мы уже подключили API в разделе <head> сайта.

Что ещё хочется отметить. Оформление блока <div>.

  1. Прежде всего, обратите внимание чтобы у блока остался id="element_to_pop_up", либо, если меняете id измените его и выше в коде где он встречается. Дело в том, что JQuery именно по этому id определяет какой элемент показывать.
  2. У меня оформление <div> сделано inline стилем. Т.е. прямо в коде дива прописано “style="display: none; border…” и т.д. Так делать необязательно, необходимый стиль вы можете впихнуть в ваш CSS файл, мне было лень, и так наглядней пример.
  3. Мой <div> не показывается пользователю стиль “display: none”. Т.е. содержание скрыто и отображается тлько поп-апом. Так делать не обязательно, если у вас уже есть виджет группы ВК вы можете поп-апить именно его, главное верно оформить код.

Вместо заключения

Вот так, используя небольшие знания JS и JQuery можно повысить функциональность сайта и добиться синергии продвижения: сайт + группа ВК.  Мы используем социальную оплату пользователей для увеличения ПФ на сайте, кроме того можем продвигать группу увеличивая число живых подписчиков.

Конечно приведенный мной код не идеален, так же к минусам можно отнести существенное увеличение загружаемого размера - библиотеки JQuery а так же API ВКонтакте съедят довольно много пользовательского трафика. С другой стороны, возможно вы уже исопльзуете все эти библиотеки?

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

И последнее, API ВКонтакте содержит очень много интересных фишек, если тема в целом интересна, дайте знать - постараюсь раз в 1-2 месяца обращаться к фишкам ВКонтакте.

Комментарии   

Андрей
0 #21 Андрей 02.07.2014 08:35
Интересно, какое отношение поисковых систем к данному методу? Кто нибудь делал анализ?
Цитировать | Сообщить модератору
maximus
0 #22 maximus 02.07.2014 08:50
А тут нет потенциальных проблем.
Во-первых работает JS, который по идее пауки не обрабатывают, во-вторых показывается то же самое содержимое что уже есть на сайте.
Цитировать | Сообщить модератору
maximus
0 #23 maximus 02.07.2014 08:51
К слову, сейчас у сайта из статьи 31 лайк на главной и 5300 участников в группе
Цитировать | Сообщить модератору
Drabadan
0 #24 Drabadan 24.07.2014 17:03
По ссылке jquery.cookie.j s ничего нет. Есть аналаги, но я не в силе понять то это или нет.
Цитировать | Сообщить модератору
maximus
0 #25 maximus 25.07.2014 00:38
Видимо у github поменлось что-то в работе.
Обновил ссылки на оба jquery плагина.
Цитировать | Сообщить модератору
Александр
0 #26 Александр 24.07.2015 10:44
Не работает этот скрипт :((( все сделал правильно, не появляется pop-up окно :(((
Цитировать | Сообщить модератору
Jazz
0 #27 Jazz 24.07.2015 11:45
Инструкция хорошая, все заработало почти сразу. Никак не мог понять, почему виджеты выводятся каждый по два раза.
Проблема решается исключением скриптов из обёртки
Цитировать | Сообщить модератору

Добавить комментарий


Защитный код
Обновить

Монетизация

Представьтесь