Создание формы поиска для сайта с помощью скрипта от Google

Доброго здоровья, дорогие читатели блога Goldbusinessnet.com! Надеюсь, что многие из вас уже прошли регистрацию в Google Adsense. Возможно, вы уже создали и настроили внешний вид рекламных объявлений, которые будут показываться на страницах проекта. А если это так, значит ваш ресурс набирает обороты и заслуживает определенного внимания и уважения.

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

Поиск Google

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

Настройка поиска Google по сайту в панели управления Adsense

Для того, чтобы настроить поиск Google, необходимо войти в аккаунт системы контекстной рекламы Google Adsense. Для этого на странице входа Гугл Адсенс введите свой e-mail и пароль в соответствующие поля, затем нажмите кнопку «Войти». В панели управления Adsense из верхнего меню выбираете «Мои объявления», следующим шагом — из левого столбца — «Поиск». Далее кликаете по ссылке «Новая система пользовательского поиска».

Adsense поиск

В самую верхнюю графу вводите название системы. Советую выбрать название своего ресурса. Для чего это нужно? Ну, прежде всего, для того, чтобы различать варианты поиска для каждого сайта, если их несколько. Первая настройка, которая будет предложена, это выбор области, по которой будет осуществляться поиск. Мы устанавливаем настройку для определенного (определенных) ресурса, потому ставим «Только выбранные мной сайты».

При активации этой опции становится доступным поле для ввода url web-сайтов, по которым будет вестись поиск. Можно написать адреса нескольких проектов, тогда полученная форма поиска будет для них объединенной. Но это делать есть смысл только в том случае, если блоги или сайты одной или близких тематик.

Настройка поиска

Ниже предлагается ввести ключевые слова, которые наиболее полно определяют тематику вебсайта. Это необходимо для подбора наиболее релевантных объявлений контекстной рекламы Adsense; чем больше релевантность, тем эффективнее реклама, а, значит, тем больше ваш заработок. Блоки объявлений будут появляться на странице результатов поиска Google по сайту после введения пользователем соответствующего запроса в строку формы поиска.

Для чего нужны эти КС? Для того, чтобы сузить область применения значения того или иного термина и повысить релевантность рекламных объявлений, которые будут появляться на странице результатов поиска. Приведу простой пример. Допустим, посетитель ввел в поисковую строку слово «карта». Это слово имеет несколько значений и довольно широкий диапазон применения этих значений.

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

Далее. Если поставите галочку напротив «Использовать Безопасный поиск», то включится фильтр SafeSearch, который отсеивает порнографические и другие нежелательные ресурсы. Но эта опция нужна только тогда, когда ведется поиск по нескольким сайтам или по всей сети. После этого указываете страну, в домене которой будет производится пользовательский поиск Google, язык вашего web-сайта и кодировку (обычно для блогов и сайтов Вордпресс используется Юникод (UTF-8)).

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

Настройка клиентского канала для мониторинга эффективности рекламных объявлений на странице результатов поиска

Также как клиентские каналы Adsense, настроенные для тематических страниц блога или сайта WordPress при создании контекстной рекламы, клиентский канал для вебстраницы с результатами поиска гугл позволяет отслеживать эффективность кликов и предпринимать определенные шаги для увеличения релевантности рекламных объявлений.

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

Клиентский канал

Все, канал настроен. Теперь, если перейти по вкладкам «Поиск»→«Клиентские каналы» в левой части админ панели Google Adsense, то будете наблюдать название своего новоиспеченного клиентского канала:

Название канала

Если в последствии возникнет желание отредактировать канал (поменять название), то надо кликнуть по ссылке с его названием. При возникшей необходимости отследить (провести мониторинг) эффективности канала нажимаете «Просмотреть отчет». Замечу, что начинать отслеживать эффективность рекламных объявлений есть смысл спустя какое-то время (например, через месяц), когда будут собраны необходимые данные, которые могут быть подвергнуты корректному анализу. Естественно, я самым подробнейшим образом буду делиться информацией на эту тему с вами, уважаемые читатели.

Как настроить форму со строкой поиска Google по своему сайту

На этой же странице редактирования поиска Гугл следующим шагом можно настроить внешний вид формы поиска Google по сайту (окно со строкой поиска). Для этого нажимаем на ссылку «Стиль окна поиска» и получаем различные варианты его внешнего вида:

Окно поиска

Здесь отмечаете нужный, который более всего подходит под дизайн web-страниц проекта. Вы можете сомневаться, какое число символов отметить, которые определят длину строки ввода (текстового поля). Поставьте на глазок, ее можно потом изменить, когда получите код формы поиска Google. После того, как определитесь с формой, можно настроить внешний вид рекламных объявлений для страницы с результатами поиска Google. Кликаете по «Стилю объявлений» и проявляете творческое начало, подробнее с этим процессом можете ознакомиться по приведенной выше ссылке.

Выбор внешнего вида страницы результатов поиска Google по сайту

Наконец, последняя ссылка настройки — «Результаты поиска». Здесь даны три варианта внешнего вида, который может приобрести вебстраницы с результатами поиска Google.

Результаты поиска

В первых двух вариантах результаты будут открываться на странице поисковой системы Google и не будут связаны с дизайном вашего вебсайта. В первом случае вебстраница с результатами откроется на той же странице, где вводился поисковой запрос, во втором — в новом окне. На мой субъективный взгляд, второй вариант более предпочтителен с точки зрения удобства для посетителей ресурса, но это только лишь мое мнение.

Напротив строки «URL изображения логотипа» вы можете указать url (адрес) html картинки, которая используется в шапке вашего блога или сайта. Если отметите один из двух первых вариантов, то напротив строчки «URL изображения логотипа» автоматически откроется путь до этого изображения. Чтобы было понятнее, можно продемонстрировать это, используя, скажем плагин Web Developer для браузеров Mozilla Firefox и Google Chrome.

Для этого активируем расширение, кликнув по значку шестеренки в правом верхнем углу окна браузера, из верхнего меню выбираем «Images», затем из появившегося списка — «View Image Information». В соседней вкладке откроется информация о всех изображениях на web-странице, в том числе получите сведения об URL вашего логотипа. Как видно из выше расположенного скриншота, изображение для шапки моего блога хранится в папке «img» текущей темы WordPress.

Если есть желание использовать другую картинку для страницы результатов поиска Google, можно ее загрузить на сервер с помощью незаменимого для вебмастера клиента ftp Filezilla, после чего прописать путь для нового изображения напротив строчки «URL изображения логотипа». Можете выбрать из настроек, где будет располагаться изображение: над или рядом относительно окна (формы) поиска Google.

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

Результат поиска

Для того, чтобы вывести результаты поиска Google по сайту, необходимо создать отдельную вебстраницу через админку WordPress. Обязательно ознакомьтесь с моей статьей Шаблон WordPress: как создать специальную (уникальную) страницу для блога WordPress (с примером создания web-страницы для пользовательского поиска Google), где я все очень подробно описал. Добавлю, что после того, как вы создали страницу для вывода результатов поиска, нужно прописать ее адрес в графу напротив строки «URL вывода результатов поиска». После того, как все выше описанные настройки установлены, надо нажать кнопку «Сохранить и получить код» в самом низу окна настроек.

Вставка кодов формы (окна) и страницы результатов поиска Google

Если вы настроили получение результатов поиска Google по сайту с использованием дизайна ресурса (третий вариант), то получите после сохранения два кода:

Коды поиска

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

Окно поиска по умолчанию

После того, как я скопировал верхний код, я вставил его в файл searchform.php темы вместо старого кода и окружил контейнером div с соответствующим классом, которому прописал нужные стили, чтобы форма выглядела подходящей к дизайну сайта.

<div class="search"><form action="/rezultat-poiska/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXX:YYYYYYYYYY" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="25" />
    <input type="submit" name="sa" value="&#x041f;&#x043e;&#x0438;&#x0441;&#x043a;" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.ru/coop/cse/brand?form=cse-search-box&amp;lang=ru"></script>
</div>

На страницах блога я уже довольно подробно описывал применение стилей CSS к оформлению вебстраниц. В вашей теме Водпресс тоже должен быть файл с подобным названием (один из вариантов, например, search.php). После вставки кода форма поиска Google приняла такой вид:

Форма поиска Google

Нижний код вставляем на вновь созданную страницу (у меня она названа «Результат поиска») прямо в окне HTML редактора админки Вордпресс. Да, чуть не забыл. Вебстраница с результатами поиска не должна фигурировать ни в одном меню блога или сайта. Поэтому нужно исключить ее id, чтобы не вводить читателей в заблуждение, поскольку никакой информации на ней не будет.

Для того, чтобы узнать id, зайдите в админ панель WordPress в раздел «Страницы» и подведите курсор к ссылке на нужную страницу. В результате внизу в строке состояния браузера увидите ее адрес, в составе которого будет указана цифра, которая и является искомым id.

ID страницы

Итак, id определен, теперь необходимо его исключить из всех меню на web-сайте. В моей теме, например, за вывод меню отвечает шаблон header.php. Данное меню определяется строчкой примерно следующего вида:

<?php wp_list_pages('title_li=&depth=1'); ?>

Здесь я дополнил эту строку следующей записью:

&exclude=4366

Получилось так:

<?php wp_list_pages('title_li=&depth=1&exclude=4366'); ?>

Все, теперь страница пользовательского поиска Google на сайте будет исключена из меню и будет появляться только с результатами поиска по запросам читателей. Надеюсь, я все объяснил понятно.

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

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

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Юлия

    Игорь, добавила как вы написали поиск. все нормально,работает. Но ищет почему-то только рекламные объявления. Или это из-за того, что у меня контента еще очень мало?
    Кстати, еще вопрос, коли пошла такая гулянка.Вчера всю ночь устанавливала поиск: хотела поставить в шапке. Все норм, установила, в правом верхнем углу, как хотела. Только он отказался работать в том месте. Пришлось переносить в сайтбар. А так хотелось, чтобы он вверху был!

    Ответить
    1. Игорь Горнов автор

      Юлия, вообще-то рекламные объявления будут появляться на странице результатов поиска, поскольку это предусмотрено adsense. А вот насчет того, почему строка поиска не функционирует в шапке, однозначно сказать прямо сейчас не представляется возможным, поскольку у меня нет под рукой Ваших шаблонов темы.

      Ответить
      1. Юлия

        Насчет объявлений, я имела ввиду, поиск Гугла не ищет книги. Я теперь знаю почему: они еще непроиндексировались.Над щаблоном я основательно потрудилась, но вроде бы нигде не напортачила. Могу предоставить.

        Ответить
        1. Игорь Горнов автор

          Юлия, к сожалению, я не могу сейчас уделить Вам время, поскольку работаю с сайтом клиента. А Вы вставляли код для строки поиска в шаблон header.php? Странно, в принципе должен работать, если все делали по моим рекомендациям.

          Ответить
          1. Юлия

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

          2. Игорь Горнов автор

            Юлия, по моему, у Вас строка поиска отлично смотрится и находится на нужном месте, хотя о вкусах не спорят…

  2. Оксана

    Прошу помощи! Вчера всю ночь устанавливала поиск от гугла на сайт. Долго мучилась с окошком формы поиска. Методом тыка в файле со стилями добилась чтобы не вылазила рамка от окна установленного темой, пришлось так же убрать иконки фейсбука и твиттера в хедере. Так же добавила в хедер exclude= с id страницы. Врде все заработало. Со спокойной душой легла спать в 6 утра. А сегодня открываю сайт, на главной странице красуются удаленные иконки соцсетей, окно поиска убежало куда-то влево, вместо кнопки «поиск» лупа от старого окна поиска, а в довершение ко всему и «результаты поиска» вылезли вторым рядом под кнопкой «главная» Это все на главной, а на страницах с записями все отображается нормально, как я настроила. Это в хроме. В остальных браузерах та же абракадабра, только почему-то еще хуже. Делаю все сама, по крайней мере стараюсь разобраться, естественно ни в CSS, ни в HTML совсем не сильна. Может подскажете, что я сделала не так?

    Ответить
    1. Игорь Горнов автор

      Оксана, Ваша форма поиска выглядит совершенно корректно, если только это тот сайт, адрес которого Вы ввели при заполнении формы комментариев. По крайней мере, того ужаса, который Вы описали, в Хроме я не наблюдаю.

      Ответить
      1. Оксана

        Игорь, адрес тот. Спасибо, Вы меня успокоили. Почистила кеши, стало все нормально отображаться во всех браузерах. Жалко, что сразу не догадалась это сделать, зря только распереживалась.

        Ответить
  3. Алексей

    Наконец-то, вчера попробовал установить на своем блоге о рыбалке http://na-kruchok.ru, данный поиск.Все заработало. Единственный след, который виден пользователю — это меню страницы поиска. Дело в том, что тема стоит сложная, вся из макрокоманд. Нашел только место даже не в хелдере, которое может отвечать за данный выход, а в bfa_hor_pages.php.Выглядит оно так:

    $list_pages_string = wp_list_pages(‘sort_column=’ . $sort_order . ‘&title_li=&depth=’ . $levels . ‘&exclude=’ . trim(str_replace(» «, «», $exclude))

    Я вставил ссылку на свою страницу поиска &exclude=6394 сразу после &title_li= , но ничего не заработало.
    Хотелось бы спросить, что означает depth=1 у вас. Может лучше мне поставить после depth=

    Ответить
    1. Игорь Горнов автор

      Алексей, вообще-то, переменная depth означает глубину вложенности документа (страницы). У вас, как и у меня, это 1 (первый уровень), так что это не выход. С такой комбинацией php я не встречался, сразу навскидку не могу Вам помочь, к сожалению, потому как не супер спец в php. А Вы не могли ошибиться с id (6394)? Попробую покопаться и помочь Вам, как-то даже настроение упало, что нет конкретного ответа.

      Ответить
      1. Алексей

        Игорь, обрати внимание, дальше эта переменная ‘&exclude=’описана. У тебя , наверно, такого нет. Может мне там указать ID. Попробуй, если не трудно, произвести поиск слова или словосочетания, может еще чего-нибудь посоветуешь своим критическим взглядом

        Ответить
  4. Алексей

    Как много нам открытий чудных, готовит просветления дух…
    Надо обязательно попробовать. Тем более, что с Яшкой дружба не получается.

    Ответить
    1. Игорь Горнов автор

      Алексей, знание классики делает Вам часть, спасибо за отсвет эрудиции на страницах моего блога. Ну, а с Яшей надо тоже подружиться, он вполне себе выдерживает конкуренцию с Google.

      Ответить