Продажа товаров в Интернете стала тенденцией привлекать внимание мировой аудитории. Среди этих продуктов проще продавать исключительно веб-продукты и услуги, чем материальные продукты. Маркетинг продуктов в Интернете является решающим фактором повышения продаж. Поэтому важно демонстрировать возможности ваших продуктов и услуг в интерактивном режиме, чтобы привлечь внимание потенциальных клиентов. Продуктовые туры, также известные как тематические туры, являются идеальным решением для продвижения продукта. В этом руководстве объясняется важность создания туров по продукту и показывается, как Intro.js можно использовать для создания эффективного тура по продукту.
Что такое продукт тур?
Обзор продукта — это последовательность шагов, которая знакомит с существующими функциями продукта или функциями, добавленными в последней версии. Существуют различные типы продуктовых туров, и до недавнего времени большинство продуктовых туров создавались как презентации с использованием Flash. В последнее время библиотеки JavaScript стали намного популярнее при создании туров по продуктам, поскольку они предоставляют интерактивную демонстрацию возможностей продукта вместо статических изображений и анимации.
Зачем мне нужен тур по продукту?
Как правило, веб-продукты связаны с веб-сайтом в маркетинговых целях. Эти веб-сайты содержат руководства пользователя или документацию, иллюстрирующие функциональность и возможности продукта. Но эти руководства пользователя не так эффективны, как экскурсии по продукту, по следующим причинам.
- Люди не любят читать длинную документацию.
- Документация не предоставляет интерактивную демонстрацию каждой функции.
- Люди не регулярно читают документы, и поэтому сложно вводить новые функции.
В качестве решения продуктовые туры используются для выделения функций и привлечения внимания новых пользователей к продукту. Функции туров по продуктам могут различаться в разных типах библиотек создания туров по продуктам, но каждая библиотека предоставляет общий набор функций, необходимых для создания туров. Давайте посмотрим на основные функции библиотеки создания продукта.
Особенности создания продукта Tour Библиотеки
- Кнопка запуска тура продукта — эта кнопка может поставляться с библиотекой, или разработчику может потребоваться определить пользовательскую кнопку для инициализации тура. Эта кнопка должна быть разработана таким образом, чтобы она привлекала внимание пользователей и обычно была больше, чем обычные кнопки.
- Этапы ознакомления с продуктом. После запуска пользователь должен пройти через ряд этапов, представляющих его функции, до завершения ознакомления с продуктом. Библиотека создания тура продукта должна содержать простой и понятный способ определения шагов в цикле путем назначения различных элементов HTML в документе. Несмотря на то, что это не является обязательным, полезно иметь кнопки « Назад» и « Далее» для навигации по этапам обзора продукта.
- Кнопка пропуска продукта — почти наверняка, что не каждый пользователь хочет пройти весь процесс продукта. Иногда первые несколько шагов тура могут быть достаточно эффективными, чтобы принять решение о покупке продукта. В таких ситуациях пользователи должны иметь возможность пропустить тур и двигаться вперед. Таким образом, библиотека должна содержать кнопку Пропустить , которая позволяет пользователю пропустить тур. Эта кнопка должна быть доступна на каждом этапе тура.
- Кнопка завершения тура продукта — Когда пользователь достигает последнего шага, должен быть способ завершить тур. Как правило, это будет кнопка, доступная на последнем этапе. Нам нужен эффективный призыв к действию для этой кнопки. Обычно призыв к действию заключается в том, чтобы купить или попробовать продукт. Кнопка Завершить заменит кнопку Пропустить на последнем шаге.
Это основные особенности продукта тура. Далее давайте рассмотрим некоторые популярные библиотеки для создания туров по продуктам на основе JavaScript.
Библиотеки создания туров по продукту
Существует несколько библиотек создания продуктов на основе JavaScript. Каждый из них предоставляет уникальные возможности для библиотеки. Некоторые из наиболее популярных вариантов показаны ниже.
- Intro.js
- Бутстрап Тур
- увеселительная поездка на автомашине или самолете
- детская игра ‘ классы ‘
- Pageguide.js
Среди этих библиотек Intro.js предоставляет все необходимые функции для ознакомления с продуктом. Итак, для целей этой статьи мы будем использовать Intro.js для создания примера продукта.
Создание тура продукта с использованием Intro.js
Intro.js — это легкая библиотека с открытым исходным кодом для создания пошаговых туров по веб-сайту или продукту. Вы можете получить копию этой библиотеки с Github . Мы можем начать реализацию, загрузив последнюю версию. После загрузки вы можете извлечь zip-файл и попробовать примеры туров внутри папки с примерами.
Как правило, все функции и необходимая информация доступны на веб-странице, а обзор продукта используется для выделения функций дополнительной информацией. В этом уроке мы рассмотрим слегка измененный обзор продукта, где ни одна из функций изначально недоступна на веб-странице. Каждая функция будет отображаться по мере продвижения по туру. Давайте начнем с копирования необходимых файлов в новую папку для этого урока.
Шаг 1 — Добавьте файлы Intro.js
Во-первых, нам нужно добавить связанные файлы Intro.js в папку нашего проекта. Скопируйте intro.js и introjs.css в папку проекта.
Шаг 2 — Создание файла HTML
Создайте новый файл HTML и включите файлы JavaScript и CSS, как показано в следующем коде.
<!DOCTYPE html> <html lang="en"> <head> <link href="introjs.css" rel="stylesheet"> </head> <body> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="intro.js"></script> </body> </html>
Шаг 3 — Разработка первого шага
Как я упоминал ранее, все шаги будут скрыты, кроме начального шага. Кнопка запуска тура продукта и первый шаг — обязательные вещи, которые нам нужны здесь. Они реализованы с использованием следующего кода.
<div class="main_container"> <div class="flexi_form_title"> <h1 data-step="1" data-intro="This is flexible forms tour">Flexible Forms</h1> <a id="flexi_form_start" href="javascript:void(0);">Start Tour</a> </div> </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="intro.js"></script> <script> $("#flexi_form_start").click(function() { introJs().start(); }); </script>
Предыдущий код должен быть вставлен в <body> документа HTML. Обратите внимание, что стили CSS для этих элементов здесь не включены, так как они длинные. Вы можете найти код CSS в исходных файлах. На этом этапе у вас должен появиться экран, подобный следующему.
Intro.js использует пользовательский атрибут данных с именем data-step для определения шагов обзора продукта. Это будет числовое значение, используемое для определения порядка шагов. Существует также атрибут data-intro для предоставления объяснения каждого шага.
Как только кнопка нажата, мы должны инициализировать introJs().start() продукта, вызвав introJs().start() . Теперь у вас должен быть первый шаг тура, как показано на следующем рисунке.
Шаг 4 — Разработка скрытых шагов
После завершения первого шага нам нужно показать следующий набор шагов, которые скрыты при начальной загрузке страницы. Итак, давайте посмотрим на следующий код.
<div id="form_container"> <form class="flexi_form" data-step="2" data-intro="Flexible form default layout with multiple field types" style="display:none" data-position="bottom"> <ul> <li data-step="3" data-position="left" data-intro="Inline form validation"> <div class="left">Text Field</div><input type="text" /> </li> <li data-step="4" data-intro="Customizable Form Layouts"> <div class="left">Dropdown Field</div> <select> <option>Option 1</option> <option>Option 2</option> </select> </li> <li data-step="5" data-intro="Guidence for filling forms"> <div class="left">File Field</div> <input type="file" /> <div class="right">Please Upload PDF Files</div> </li> <li> <div class="left">Checkboxes</div> <input type="checkbox" /><input type="checkbox" /> </li> <li> <div class="left">Dropdown Field</div> <select> <option>Option 1</option> <option>Option 2</option> </select> </li> </ul> </form> </div>
Этот блок кода вставляется после первого блока кода и в элемент main_container и будет изначально скрыт. Этот блок содержит несколько этапов main_container продукта. Здесь мы также использовали атрибуты data-position , которые позволяют нам определить направление окна объяснения. По мере продвижения по шагам мы должны динамически показывать функции. Итак, мы используем пользовательский код JavaScript для фильтрации каждого шага в туре. Рассмотрим следующий код.
<script> $("#flexi_form_start").click(function() { introJs().start().onbeforechange(function(targetElement) { $(".steps").hide(); $(".left").css("float", "left"); $("input").removeClass("error"); $(".right").hide(); switch($(targetElement).attr("data-step")) { case "2": $(".flexi_form").hide(); $(targetElement).show(); break; case "3": $("input").addClass("error"); $(targetElement).show(); break; case "4": $(".left").css("float", "none"); $(targetElement).show(); break; case "5": $(".right").show(); $(targetElement).show(); break; } }); }); </script>.<script> $("#flexi_form_start").click(function() { introJs().start().onbeforechange(function(targetElement) { $(".steps").hide(); $(".left").css("float", "left"); $("input").removeClass("error"); $(".right").hide(); switch($(targetElement).attr("data-step")) { case "2": $(".flexi_form").hide(); $(targetElement).show(); break; case "3": $("input").addClass("error"); $(targetElement).show(); break; case "4": $(".left").css("float", "none"); $(targetElement).show(); break; case "5": $(".right").show(); $(targetElement).show(); break; } }); }); </script>
Intro.js предоставляет функцию onbeforechange() , которая выполняется перед каждым шагом перехода. Элемент следующего шага будет передан в качестве аргумента этой функции. Мы можем отфильтровать шаг с помощью простого оператора switch как показано в предыдущем коде. Затем мы фильтруем каждый шаг внутри оператора switch и добавляем необходимый код, чтобы показать возможности продукта. Эта демонстрация используется для иллюстрации возможностей туров по продукту, и большинство функций не имеют прямого отношения к Intro.js. Ваш продукт тур будет похож на следующий экран.
Вы можете просмотреть полную демоверсию и исходный код этого тура по продукту в конце этого руководства.
Шаг 5 — Реализация полной функциональности
Как упомянуто во введении, важно предоставить призыв к действию после завершения тура. Здесь мы будем перенаправлять пользователя на другую страницу после нажатия кнопки завершения. Это делается с помощью следующего кода.
<script> introJs().start().oncomplete(function() { window.location.href = "complete.html"; }).onbeforechange(function(targetElement) { // The rest of the code }) </script>
Метод intro.js oncomplete() используется для выполнения кода после завершения oncomplete() продукта. Это вызывается, когда пользователь нажимает кнопку Done на последнем шаге. Здесь мы перенаправляем пользователя на другую страницу. Вы должны иметь сильный призыв к действиям для пользователей, как только они нажмут эту кнопку.
Шаг 6 — Реализация функциональности пропуска
Пользователи должны иметь возможность пропустить тур в любое время, и поэтому у нас есть кнопка Skip на каждом шаге, кроме последнего. Intro.js использует метод onexit() для реализации функциональности пропуска. Следующий код был изменен, чтобы включить вызов onexit() .
<script> introJs().start().oncomplete(function() { window.location.href = "complete.html"; }).onexit(function() { window.location.href = "complete.html"; }).onbeforechange(function(targetElement) { // The rest of the code }) </script>
Вывод
В этой статье рассмотрены все основные функциональные возможности библиотеки для создания продукта. Не стесняйтесь загружать исходный код и проверить демо, используя следующие ссылки.
Теперь пришло время для продвижения вашего продукта с помощью удивительного продукта тур. Сообщите нам о ваших продуктовых турах или любых других уникальных продуктовых турах, доступных онлайн.