Страницы часто задаваемых вопросов довольно просты с точки зрения дизайна. Но они также задают вопрос: какие из этих вопросов действительно «часто задают»? Вместо того, чтобы полагаться на догадки, когда речь идет о содержании часто задаваемых вопросов, мы могли бы выяснить, какие вопросы действительно являются общими, отслеживая активность пользователей на странице часто задаваемых вопросов и анализируя результаты.
В этом уроке я покажу вам, как создать простой инструмент отслеживания на странице с использованием JavaScript и PHP. Мы создадим очень простые файлы, которые вы, скорее всего, сможете перетащить прямо на свой веб-сайт, и назовите их хорошими, сделав очень мало изменений на ваших текущих страницах.
Время от времени меня просят помочь клиенту определить, насколько эффективна конкретная страница для ее конкретной цели. Иногда я могу обратиться к Google Analytics или к другому инструменту отслеживания пользователей, но иногда мне нужен специализированный инструмент, чтобы по-настоящему узнать, насколько эффективна страница на самом деле.
Прекрасным примером является страница «Часто задаваемые вопросы», где многие имеют внутренние ссылки. Пользователи могут щелкнуть область оглавления, и страница перейдет к тексту привязки на той же странице. В этом случае Google Analytics не будет работать сразу после установки, как и большинство других инструментов отслеживания. Это потому, что пользователь технически не переходит на новую страницу.
Шаг 1: Постановка вашей страницы часто задаваемых вопросов
Первое, что вам нужно сделать, это включить страницу часто задаваемых вопросов для обработки кликабельного якорного текста. Рассмотрим следующий пример HTML:
[sourcecode language = ”html”]
<h1> Часто задаваемые вопросы </ h1>
<h3> <a name=»toc»> Содержание </a> </ h3>
<UL>
<li> <a id=»who_toc» href=»#who»> Кому это нужно? </a> </ li>
</ UL>
<h3> <a name=»who»> Кому это нужно? </a> — <a id=»who_back» href=»#toc»> Вернуться к началу ^ </a> </ h3>
<p> Курабитур элементум конкват нис вель орнар. Quisque sapien sapien, lobortis nec pellentesque ac, elementum vel ante. </ P>
[/исходный код]
Этот пример представляет собой отдельный элемент FAQ, но вы должны распознавать ключевые элементы на своей странице. У вас есть оглавление и заголовок FAQ, который также является ссылкой на область внизу страницы. Затем у вас есть полный вопрос (и ответ) позже на странице с кнопкой «Вернуться к началу».
Это довольно стандартное форматирование для страницы часто задаваемых вопросов. Важно отметить, что у вас есть элементы <a>, за которыми следует «href» или «name». Имя , где ссылка попадает. Здесь ссылка указывает.
Шаг 2: Включить jQuery
Не волнуйтесь! Это, вероятно, будет самой простой частью учебника, так как единственное, что вы собираетесь сделать, это добавить простую ссылку. Верхняя строка в приведенном ниже примере — это все, что вам нужно добавить, но я включил приведенный выше код только для того, чтобы показать вам, где на него нужно ссылаться.
(Примечание. Если вы используете WordPress или другую CMS, возможно, у вас уже запущен jQuery. Если вы получаете ошибки, попробуйте удалить эту строку и посмотреть, не разрешит ли это конфликт для вас.)
[sourcecode language = ”html”]
<script src = «http://code.jquery.com/jquery-1.10.1.min.js»> </ script>
<h1> Часто задаваемые вопросы </ h1>
<h3> <a name=»toc»> Содержание </a> </ h3>
<UL>
<li> <a id=»who_toc» href=»#who»> Кому это нужно? </a> </ li>
</ UL>
<h3> <a name=»who»> Кому это нужно? </a> — <a id=»who_back» href=»#toc»> Вернуться к началу ^ </a> </ h3>
<p> Курабитур элементум конкват нис вель орнар. Quisque sapien sapien, lobortis nec pellentesque ac, elementum vel ante. </ P>
[/исходный код]
Шаг 3. Добавьте некоторые функции JavaScript
Чтобы заставить эту систему работать, мы добавим немного JavaScript на нашу страницу. В частности, для тех, кому нужны гайки и болты, мы используем jQuery и AJAX.
Почему ты спрашиваешь? AJAX позволяет нам отправлять данные на сервер, где они могут храниться, и все это без обновления страницы. Весь смысл использования якорных ссылок на странице состоит в том, чтобы пользователю не приходилось каждый раз перезагружать страницу. Таким образом, AJAX позволяет нам оставаться на странице, передавая данные на сервер настолько незаметно, насколько это возможно.
Все, что мы собираемся сделать, это добавить функцию onclick к нашим ссылкам:
[sourcecode language = ”html”]
<h1> Часто задаваемые вопросы </ h1>
<h3> <a name=»toc»> Содержание </a> </ h3>
<UL>
<li> <a id=»who_toc» href=»#who» onclick=»logit(this.id)»> Кому это нужно? </a> </ li>
</ UL>
<h3> <a name=»who»> Кому это нужно? </a> — <a id=»who_back» href=»#toc» onclick=»logit(this.id)»> Вернуться к началу ^ < / а> </ h3>
<p> Курабитур элементум конкват нис вель орнар. Quisque sapien sapien, lobortis nec pellentesque ac, elementum vel ante. </ P>
[/исходный код]
На следующем шаге мы создадим функцию JavaScript под названием «logit», которая будет обрабатывать хранение наших данных о кликах. На этом шаге мы говорим браузеру запустить функцию, как только пользователь щелкнет ссылку.
Короче говоря, когда пользователь щелкает ссылку, браузер отправляет идентификатор ссылки в функцию. В приведенных выше примерах идентификаторы «who_toc» и «who_back», соответственно.
Шаг 4. Создайте код Javascript
Теперь нам нужно создать эту функцию «logit», чтобы страница знала, что делать, когда пользователь нажимает на ссылку на странице. Это очень простой, но мощный скрипт, который вы можете использовать где угодно на вашем сайте:
[sourcecode language = ”html”]
<script src = «http://code.jquery.com/jquery-1.10.1.min.js»> </ script>
<script type = «text / javascript»>
function logit (id) {
$ .Ajax ({
тип: «POST»,
URL: «logit.php»,
данные: {
я сделал
},
});
}
</ Скрипт>
<h1> Часто задаваемые вопросы </ h1>
<h3> <a name=»toc»> Содержание </a> </ h3>
[/исходный код]
Я включил фрагменты предыдущего кода, чтобы вы могли видеть, где разместить его в вашем файле.
На данный момент, это пока не работает, но мы добираемся туда быстро.
Шаг 5: Время для PHP
JavaScript не может написать на ваш сервер. Это технология на стороне клиента, то есть она работает только в браузере. Если мы хотим сохранить данные о кликах от наших пользователей, нам нужно использовать серверный язык, такой как PHP.
Мы собираемся создать новый файл PHP с именем «logit.php» и сохранить его в том же каталоге на вашем сайте, что и страница часто задаваемых вопросов. Или убедитесь, что указанный выше JavaScript правильно ссылается на файл в части URL вызова AJAX.
Вот наш файл logit.php:
[sourcecode language = ”php”]
<? PHP
$ id = mysql_escape_string ($ _ POST [‘id’]);
$ date = date (‘Ymd’);
$ time = дата (‘H: i: s’);
$ log = ‘logit.txt’;
$ current_log = file_get_contents ($ log);
$ current_log. = PHP_EOL. $ id. ‘,’. $ Даты. ‘,’. $ Время;
file_put_contents ($ log, $ current_log);
?>
[/исходный код]
Прежде чем это сработает, вам нужно загрузить файл logit.txt. Вы можете сделать это самостоятельно и загрузить его со следующим содержанием:
[sourcecode language = ”text”]
link_id, дата, время
[/исходный код]
Это просто информация заголовка, поэтому вы можете легко перенести содержимое файла журнала в Excel или другое программное обеспечение.
Я создал этот файл как разделенный запятыми файл, который должен работать на любой ОС для вас.
Проверьте свои файлы и функции
Просто чтобы быть уверенным, что у вас есть все, что вам нужно, в одном месте, убедитесь, что следующие файлы находятся в том же каталоге, что и ваша страница FAQ Итак, если ваш URL для вашего FAQ — www.somesite.com/faq, то ваши файлы будут найдены здесь:
- www.somesite.com/faq/index.html (или .php, или любые типы файлов, которые вы используете)
- www.somesite.com/faq/logit.php
- www.somesite.com/faq/logit.txt
Теперь все, что вам нужно сделать, это дать каждой из ваших ссылок на странице уникальный идентификатор, чтобы вы могли отслеживать их и добавить функцию onclick = ”logit (this.id)” к ссылке. JavaScript, PHP и AJAX сделают все остальное!
Вот снимок того, как выглядит текстовый файл. Вы можете просто перейти к файлу .txt на вашем сайте, чтобы увидеть это:
[sourcecode language = ”text”]
link_id, дата, время
когда назад, 20130715, 08:41:43
what_toc, 20130715, 08:41:44
how_back, 20130715, 08:41:46
who_toc, 20130715, 08:41:47
how_back, 20130715, 08:41:48
what_toc, 20130715, 08:52:34
why_back, 20130715, 08:52:35
how_back, 20130715, 08:52:37
how_toc, 20130715, 08:52:38
who_toc, 20130715, 08:52:43
where_back, 20130715, 08:52:44
how_toc, 20130715, 08:52:45
why_back, 20130715, 08:52:46
who_toc, 20130715, 08:52:47
what_back, 20130715, 08:52:49
where_back, 20130715, 08:52:49
who_toc, 20130715, 08:52:51
what_back, 20130715, 08:52:52
what_back, 20130715, 11:49:40
when_toc, 20130715, 11:49:41
where_toc, 20130715, 11:49:42
how_toc, 20130715, 11:49:43
what_toc, 20130715, 11:49:44
why_back, 20130715, 11:49:45
what_back, 20130715, 11:49:46
how_back, 20130715, 11:49:46
how_back, 20130715, 11:49:47
[/исходный код]
Скопируйте и вставьте в Excel или другое программное обеспечение, чтобы начать анализ. Данные начинаются как простой журнал, но с некоторой тщательной сортировкой электронных таблиц вы можете определить самые популярные вопросы, наименее популярные вопросы, самые популярные на этой неделе, и другие полезные выводы, которые могли бы руководить решениями о содержании на основе реальных данных, а не догадками или догадками. ,
Ресурсы
Вы можете поместить эту папку файлов на свой веб-сервер, чтобы увидеть, как все это работает. Дайте мне знать, что вы думаете!