Если вы читаете эту статью на 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» работала на моем сайте:

  1. Пользователь заходит на мой сайт с включенным AdBlock
  2. За несколько секунд пользователь может начать читать содержание статьи
  3. Содержимое страницы заменяется сообщением «Пожалуйста, отключите AdBlock» и некоторыми другими ссылками, которые могут показаться людям интересными или полезными.
  4. Пользователь заходит в расширение AdBlock и приостанавливает AdBlock на моем сайте.
  5. Затем исходное содержимое страницы отображается вместе с рекламой.
  6. Если пользователь повторно включает 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. /контакт".