Если вы читаете эту статью на https://briancaffey.github.io/2021/10/31/how-and-why-i-added-adsense-and-adblock-detector-to-my-website, то вам будет предложено приостановить блокировку рекламы, если вы ее используете. Если вы не используете блокировщик рекламы, я рекомендую подумать об его установке. Чтение этой статьи в браузере с включенным AdBlock позволит вам увидеть, как я обнаруживаю AdBlock и прошу людей приостановить его, когда они находятся на моем сайте.
В этой статье подробно рассказывается о том, как я добавлял рекламу на свой сайт с помощью Google AdSense и как я прошу посетителей моего сайта приостановить AdBlock, чтобы я мог больше зарабатывать на Google AdSense.
Как я добавил AdSense на свой сайт
Мне нравится использовать мой веб-сайт GitHub Pages, чтобы узнать больше о статических сайтах, JAMStack и Nuxt.js, потрясающем фреймворке Vue.js с поддержкой создания статически сгенерированных сайтов. Мне удалось изучить и реализовать несколько различных функций, о которых я написал в своем блоге. Вот некоторые примеры:
- Добавление окна чата Drift, чтобы пользователи могли напрямую писать мне
- Реализация контактной формы с помощью formsubmit.io
- Использование компонентов Vue.js в файлах Markdown для добавления интерактивных элементов в мои статьи (например, графиков)
- Добавление пользовательской формы подписки на рассылку новостей MailChimp, которая включается в нижний колонтитул каждой страницы моего блога.
- Добавление RSS-канала для моего блога
- Добавление индекса сайта и отправка его в Google
Я также изучаю набор инструментов Google для мониторинга и измерения трафика на мой сайт, включая Google Analytics и Google Search Console. Консоль поиска Google полезна для понимания поисковых запросов, которые люди используют при поиске в Google, что приводит к органическому трафику на мой сайт.
В какой-то момент я обнаружил, что другой веб-сайт использует тот же код отслеживания Google, который я ранее жестко закодировал в старой версии своего веб-сайта, и мой Google Analytics начал измерять трафик на URL-адреса, которые я не распознал как принадлежащие моему веб-сайту. сайт. Я смог исправить это, добавив правило фильтрации имени хоста в Google Analytics.
Одной из областей, в которой до недавнего времени у меня не было никакого опыта, является Google AdSense. Google AdSense позволяет размещать рекламу на вашем сайте. Вот обзор того, что я сделал, чтобы начать:
- Добавить сайт в Google AdSense
- Отправить мой сайт на утверждение (это займет несколько дней)
- Установите и настройте плагин Google AdSense для NuxtJS.
- Добавить файл ads.txt, сгенерированный Google AdSense, на мой сайт
- Подтвердите мой адрес, введя код, который был отправлен мне по почте
- Подключить банковский счет к моей учетной записи Google AdSense
Вот код подтверждения адреса, который я получил от Google:
Вот код конфигурации для AdSense из `nuxt.config.js`:
/* ** Nuxt.js modules */ modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', // Doc: https://github.com/nuxt/content '@nuxt/content', // Doc: https://www.npmjs.com/package/@nuxtjs/sitemap '@nuxtjs/sitemap', '@nuxtjs/feed', 'nuxt-i18n', ['@nuxtjs/google-adsense', { <-- AdSense config id: 'ca-pub-4924597640144289' }] ],
Процесс был довольно простым. Google теперь автоматически размещает рекламу на моем сайте в нескольких различных форматах:
- реклама, отображаемая вверху и внизу страницы
- всплывающая реклама, отображаемая между навигацией по маршруту
- реклама автоматически вставляется в тело страницы между абзацами в моих статьях
- объявления, которые я размещаю в статьях, явно используя компонент ‹adsbygoogle /› Vue
Когда все было настроено должным образом, я начал видеть рекламу на своем сайте, и я вижу ненулевое значение в моем расчетном доходе в консоли AdSense. У Google есть порог платежа в размере 100 долларов США, поэтому мне нужно внести эту сумму, прежде чем я смогу начать получать деньги от Google.
Мой расчетный отчет о доходах показывает, что я зарабатываю от 0 до 4,32 доллара США на продажах рекламы в день. Мне интересно посмотреть, сколько я могу заработать на статье, которую я размещаю на множестве различных каналов, на которые я могу публиковаться. Я исследовал это в предыдущей статье, но основные каналы, которые я могу использовать для обмена контентом, следующие:
- DEV.to
- Фейсбук
- Хашнод
- Середина
- Реддит
- Раздор
- Хакер полдень
- Твиттер
- Мой список рассылки MailChimp
- Подстек
- Хакер Новости
Эта статья должна стать хорошей отправной точкой для изучения того, насколько эффективны различные каналы для доставки контента на мой сайт, и позже я обновлю эту статью, добавив больше подробностей и цифр из моих отчетов AdSense.
Как я создал детектор AdBlock для своего сайта
Я предполагаю, что у большинства людей, читающих мой блог, в браузере установлено расширение AdBlock, как и у меня, например AdBlock или ABP (AdBlock Pro). Это заставило меня задуматься о том, как я мог бы реализовать простой детектор AdBlock для своего сайта, который скрывал бы содержимое страницы, если AdBlock включен.
Как проверить, включен ли AdBlock?
Я начал с этого вопроса и наткнулся на вопрос StackOverflow (https://stackoverflow.com/questions/4869154/how-to-detect-adblock-on-my-website), который вдохновил меня на код, который я сейчас используя на этом сайте для обнаружения AdBlock.
Компоненты моего детектора AdBlock
Есть несколько разных частей моего приложения Nuxt, которые работают вместе, чтобы определить, активен ли AdBlock, и запросить у пользователя приостановку AdBlock для сайта. Основные компоненты:
1. Компонент под названием «AdBlockBlocker».
- Этот компонент используется в макете по умолчанию, поэтому он включен на все страницы на briancaffey.github.io.
2. Модуль хранилища Vuex под названием «adblock».
- этот модуль используется для отслеживания логического значения, указывающего, включен ли AdBlock
- модуль также имеет простой геттер и мутацию для превращения adBlock в true или false
3. Некоторая логика в макете default.vue, который используется почти для всех страниц моего сайта.
- геттер из магазина Vuex используется здесь либо для отображения обычного контента, либо для сообщения пользователю о том, что нужно приостановить AdBlock.
4. Компонент/страница для отображения при включенном AdBlock
- этот компонент просит пользователя приостановить AdBlock
- Я назвал этот компонент «PleaseDisableAdblock.vue».
5. локальное хранилище
- это используется для отслеживания наличия AdBlocker, который блокирует рекламу
Вот обзор каждой части:
AdBlockBlocker.vue
Это ключевая часть работы обнаружения AdBlock. Если клиент не может загрузить файл adsbygoogle.js, это означает, что пользователь использует AdBlock.
<template> <div /> </template> <script> export default { mounted () { // if adblock is detected through a value that is set local storage, then show the AdBlock message // the `adblockEnabled` value is set in the catch block of the `detectAdBlock` method // (see adblock/setAdblockEnabled mutation) if (JSON.parse(localStorage.getItem('adblockEnabled')) === true) { this.$store.commit('adblock/setAdblockEnabled', true) } // check to see if the URL can be accessed on a 5 second interval setInterval(() => { this.detectAdBlock() }, 5000) }, methods: { async detectAdBlock () { // this is a URL that should be blocked by AdBlock const googleAdUrl = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' // make a request to the above URL await fetch(new Request(googleAdUrl)).then((_) => { // isAdblockEnabled is false by default // Check to see if isAblockEnabled was set to true by a previous request if (this.$store.getters['adblock/isAdblockEnabled'] === true) { // if the request was successful, then the user does not have AdBlock enabled, // so we can set isAdblockEnabled to false using the setAdblockEnabled mutation // this mutation will also set the `adblockEnabled` value in local storage to "false" // `adblockEnabled` be `JSON.parse`d since it is saved in localStorage as a string this.$store.commit('adblock/setAdblockEnabled', false) window.localStorage.setItem('adblockEnabled', 'false') // do a full reload of the page window.location.reload() } }).catch((_) => { // if the request was unsuccessful, then the user has AdBlock enabled. // we can set isAdblockEnabled to true using the setAdblockEnabled mutation // this will also set the `adblockEnabled` value in local storage to "true" this.$store.commit('adblock/setAdblockEnabled', true) window.localStorage.setItem('adblockEnabled', 'true') }) } } } </script>
Еще одним важным моментом в этом компоненте является то, что он запускает обнаружение AdBlock с помощью `setInterval`, что означает, что он будет проверять, включен ли AdBlock каждые несколько секунд, пока пользователь находится на моем сайте.
- Если AdBlock включен, запрос завершится ошибкой, а значение хранилища Vuex будет обновлено, что приведет к отображению на сайте компонента PleaseDisableAdblock.vue.
- Если AdBlock не включен, файл будет прочитан из кеша диска, а значение хранилища Vuex останется «ложным».
Магазин Vuex
Это очень простой модуль хранилища Vuex. Геттер isAdblockEnabled будет использоваться в макете default.vue для компонента.
let initialValue = false if (process.window) { initialValue = JSON.parse(window.localStorage.getItem('adblockEnabled')) || false } export const state = () => ({ adblockEnabled: initialValue }) export const getters = { isAdblockEnabled: state => state.adblockEnabled } export const mutations = { setAdblockEnabled (state, payload) { state.adblockEnabled = payload } }
логика компоновки default.vue
<template> <div> <Navigation /> <PleaseDisableAdblock v-if="$store.getters['adblock/isAdblockEnabled']" /> <Nuxt v-else /> <AdBlockerBlocker /> <Footer /> </div> </template>
Содержимое для запроса на приостановку AdBlock пользователем
Когда у пользователей включен AdBlock, я показываю простое сообщение с просьбой отключить AdBlock. Я также хочу пригласить людей, которые не хотят отключать AdBlock, читать мой блог прямо на GitHub или читать его без рекламы, клонируя или разветвляя мой репозиторий, создавая его и запуская в режиме разработки с помощью `yarn dev`.
Зачем я добавляю рекламу и детектор AdBlock на свой сайт?
Все чаще просят приостановить AdBlock. Я заметил, что опыт работы с каждым сайтом, запрашивающим приостановку AdBlock, отличается. Например:
- сайт может попросить вас приостановить AdBlock, но у вас есть возможность продолжить без приостановки AdBlock
- сайт показывает вам предварительный просмотр статьи и просит вас включить AdBlock, чтобы увидеть всю статью
- все содержимое сайта скрыто, если вы используете AdBlock, а всплывающее сообщение просит вас «Продолжить на сайт» после того, как вы приостановили AdBlock.
Я помню, как на некоторых сайтах можно было удалить модальные окна и фон обнаружения AdBlock, чтобы обойти детекторы рекламных блоков. Это так же просто, как «Cmd + Shift + C», щелкните элемент, который блокирует содержимое страницы, и «удалите» выбранный элемент.
Одна из причин, по которой я хотел внедрить обнаружение AdBlock, — посмотреть, что возможно с точки зрения взаимодействия с пользователем (UX). В идеале, вот как я хочу, чтобы функция «пожалуйста, отключите AdBlock» работала на моем сайте:
- Пользователь заходит на мой сайт с включенным AdBlock
- За несколько секунд пользователь может начать читать содержание статьи
- Содержимое страницы заменяется сообщением «Пожалуйста, отключите AdBlock» и некоторыми другими ссылками, которые могут показаться людям интересными или полезными.
- Пользователь заходит в расширение AdBlock и приостанавливает AdBlock на моем сайте.
- Затем исходное содержимое страницы отображается вместе с рекламой.
- Если пользователь повторно включает AdBlock вскоре после его приостановки, сообщение «Пожалуйста, отключите AdBlock» должно отображаться снова.
Я не хочу просить пользователя нажать кнопку или заставить его думать, что ему нужно обновить страницу. Вот почему я использую `setInterval`, я постоянно делаю запросы к файлу JavaScript Google Ads, который будет использоваться для определения того, включен ли AdBlock.
Я рад приостановить свой AdBlock для небольших сайтов, которые меня просят, или для газетных сайтов, которые поддерживаются рекламой, и я предполагаю, что люди, посещающие мой сайт, также не будут против приостановки AdBlock в качестве способа поблагодарить меня за работа, которая входит в то, чем я делюсь в своем блоге.
В основном мне интересно посмотреть, что произойдет с трафиком моего сайта, и посмотреть, как это повлияет на доход, который я получаю от AdSense.
Вот некоторые из моих вопросов:
- Что произойдет с показателем отказов, если я попрошу пользователей AdBlock приостановить AdBlock для моего сайта?
- Каково наиболее эффективное время ожидания, прежде чем запросить у нового пользователя приостановку AdBlock для моего сайта
- Что еще я могу добавить на страницу «Пожалуйста, отключите AdBlock», чтобы побудить новых пользователей приостановить AdBlock на моем сайте?
У меня будет хорошая последующая статья, чтобы поделиться цифрами из моей аналитики AdSense и Google.
Одна небольшая проблема
Пока реклама работает на моем сайте, я заметил ошибку консоли, связанную с AdSense:
K {message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.", name: 'TagError', pbr: true, stack: "TagError: adsbygoogle.push() error: Only one 'enab…agead/js/adsbygoogle.js?client=ca-google:77:1130)"} message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page." name: "TagError" pbr: true stack: "TagError: adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page. at go (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:219:326) at fo (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:218:788) at mo (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:225:365) at c (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:226:38) at no (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:226:156) at yo (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:235:248) at oo (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:232:89) at http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:227:47 at Od.aa.ma (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:64:802) at Jf (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:77:1130)"
Вот похожая проблема на GitHub: https://github.com/nuxt-community/google-adsense-module/issues/141. Я до сих пор не знаю, как решить эту проблему. Если у кого-то есть идеи, пожалуйста, дайте мне знать!
Если вам интересно следить за моим прогрессом, не стесняйтесь подписаться на мою рассылку MailChimp, заполнив форму в нижнем колонтитуле моего веб-сайта или подписавшись на меня в любой из учетных записей, перечисленных на https://briancaffey.github.io. /контакт".