Предыдущий ролик Следующий ролик  

Видео урок: Размещение кода рекламного блока на веб сайте

Google AdSense с самого начала

Теперь, когда мы настроили наш первый рекламный блок в Google AdSense, мы должны разместить этот блок на сайте. Когда мы сохранили его в последнем видео, Google открыл для нас всплывающее окно с кодом, который мы должны добавить на наш сайт. Обратите внимание, что он спрашивает, какой тип кода вы хотите использовать. Если вы выберите асинхронный вариант, это гарантирует, что загрузка рекламы на сайт для этого конкретного рекламного блока никогда не будет мешать загрузке контента сайта. Итак, убедитесь, что вы выбираете асинхронный тип кода, и если хотите узнать о нем больше, наведите курсор на знак вопроса и нажмите на синюю ссылку "Узнать больше" (Learn more) внизу.

Теперь давайте скопируем код в этом окне. Если мы нажмем на него один раз, весь код будет выбран автоматически. Затем мы можем скопировать его в буфер обмена, кликнув по нему правой кнопкой мыши и выбрав пункт "Копировать". Следующую часть работы вам, возможно, придется выполнять иначе, чем это делаю я, потому что вам нужно будет перейти на свой сайт и добавить в него этот код. В этом примере я буду использовать WordPress, но вы можете использовать и другую систему. Хотя действия могут немного отличаться, общая идея останется одной и той же. Итак, я собираюсь перейти на другую вкладку в браузере, где у меня открыт сайт, на который я собираюсь добавить этот рекламный блок.

Мы хотим, чтобы он располагался в самом верху, над заголовком. Здесь я хочу воспользоваться одним маленьким трюком, чтобы точно знать, где разместить объявление или рекламный блок на сайте. Если вы используете Google Chrome, кликните по странице правой кнопкой мыши и выберите опцию "Просмотр кода элемента". Она позволяет изучать различные элементы сайта. Итак, я нажму на увеличительное стекло с левой стороны экрана. Сейчас я выберу вот этот элемент моего сайта, заголовок, потому что собираюсь поместить рекламный блок прямо над ним.

Если я нажму на эту часть сайта, то здесь, в нижнем окне, браузер покажет мне код сайта и ту конкретную область, которую я выбрал. Таким образом, когда я открою код своего сайта и просмотрю его в редакторе, я буду искать эту строку, и размещу рекламный блок прямо над ней. Обратите внимание, кстати, что я ищу заголовок с идентификатором "branding". Итак, теперь я перейду на еще одну вкладку, где у меня открыта панель инструментов WordPress, чтобы отредактировать код моего сайта. Итак, на панели инструментов WordPress я перейду в раздел "Внешний вид" и выберу "Редактор".

В Редакторе откроется весь код моего сайта. Будьте очень, очень осторожны при редактировании кода в этой части сайта, потому что, если вы что-то перепутаете, вы можете нарушить работу сайта, и потом замучаетесь приводить все в порядок. Поэтому будьте очень, очень осторожны, когда находитесь в этой части сайта. Чтобы добраться до заголовка, над которым я хочу разместить рекламный блок, я прокручу страницу вниз, и с правой стороны найду вкладку под названием "header.php". Когда я нажму на нее, откроется весь код для заголовка на моем сайте.

Теперь я уже забыл, что ищу. Так что я вернусь к последней вкладке, чтобы вспомнить, что мне нужен идентификатор "branding". Итак, я вернусь к коду. Здесь я также могу применить маленькую хитрость, которая мне очень нравится. Если вы нажмете Cmd+F на компьютерах с Mac или Ctrl+F на компьютерах с Windows, появится маленькое окно поиска, с помощью которого вы сможете найти что-нибудь на странице. В этом примере я найду слово "branding", потому что оно входит в код, над которым я хочу разместить мой рекламный блок.

Итак, как видите, я нашел нужный мне раздел заголовка и хочу добавить рекламный блок прямо над ним. Поэтому я кликну чуть выше заголовка и с помощью контекстного меню вставлю код, который я скопировал из Google AdSense, в эту область. Как видите, код на месте, и теперь я прокручу страницу вниз и нажму на кнопку "Обновить файл". WordPress обновит наш сайт, и мы вернемся к его фронтальной стороне. Закроем просмотр кода. Когда я обновлю страницу, мы должны увидеть в ее верхней части горизонтальное объявление.

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