Hexo NexT主题博客接入谷歌广告

发表于 更新于 分类于 ， 阅读次数： 本文字数： 3k 阅读时长 ≈ 11 分钟

本文将向你展示 Hexo + NexT 主题博客如何接入 Google 广告联盟 Google Adsense

Hexo NexT主题博客接入谷歌广告

前提

  • 使用 Hexo 和 NexT 主题搭建博客
  • 可以登录 Google Adsense 网站（科学上网）

注册账号

Google Adsense

向网站列表添加新网站

要在新网站上展示广告或设置网站级屏蔽规则，首先需要先将相应网站添加到您的网站列表中。

添加新网站

  1. 登录您的 AdSense 帐号。
  2. 点击 网站。
  3. 点击 添加网站。
  4. 输入您网站的网址。

  5. 将您的网站关联到 AdSense。

    将代码复制并粘贴到网页的 HTML 中，放置在 <head> 和 </head> 标签之间。

    使用 Hexo + NexT 搭建的博客站点，只要将 Google 提供的 AdSense 代码添加到 /themes/next/layout/_partials/head/head.swig 文件末尾即可：

    1
    <script data-ad-client="ca-pub-5699403938610067" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    以下是添加了代码的 HTML 网页示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <html>
    <head>
    <script data-ad-client="ca-pub-5699403938610067" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    This is the head of your page.
    <title>Example HTML page</title>
    </head>
    <body>
    This is the body of your page.
    </body>
    </html>

  6. 点击 完成。 Google AdSense 会审核您的网站是否可以开始展示广告。

审核网站是否已可以开始展示广告

添加新网站后，Google AdSense 会检查以确保您的网站已可以开始展示广告。它将验证您是否是网站所有者以及您的网站是否符合 AdSense 合作规范。通常，此过程几天之内就能完成，但在某些情况下最长可能需要 2 周时间。Google AdSense 会在审核完毕并确认您的网站可以开始展示广告后通知您。

放置广告

根据站点的结构设计和选择广告的投放位置，目前 Google AdSense 主要提供了 按网站 和 按广告单元* 两种形式的广告添加方式。

按网站（自动广告）

自动广告是 Google AdSense 近来提供的一种广告形式，它自动会分析您的网页，然后根据您的布局、内容和现有 Google 广告找到新位置来展示广告。您只需放置一段广告代码即可开始使用。在您放置代码后，自动广告会根据您对网站和广告设置所做的任何更改自动进行调整。自动广告可自动调整以适应每种屏幕尺寸。

前期准备

确保您的网站已列入广告页面。如未列入，您需要在设置自动广告之前，将相应网站添加到您的网站列表中。

设置自动广告

  1. 登录您的 AdSense 帐号。
  2. 点击 广告 接着点击 概览。
  3. 在汇总了您所有网站的表格中，点击相应网站旁边的“修改”图标 修改。该网站就会在广告设置预览模式下打开。
    • 提示：在自动广告投放之前，您可以使用预览功能尝试不同的广告设置。
  4. 在“网站设置”下，启用 自动广告。
  5. （可选）如果您想让 Google 为您一起优化广告单元和自动广告，并在效果最佳的广告展示位置上投放广告，请启用 优化您现有的广告单元 选项。
    • 注意：此设置目前尚未启用。启用此设置意味着您愿意让 Google 在日后为您优化现有广告单元。
  6. （可选）点击 广告格式 可关闭页内广告和重叠式广告，或开启页面中的匹配内容。详细了解广告格式和匹配内容设置。
  7. （可选）点击 广告投放量，然后使用滑块控制您在网页上展示的广告数量。了解如何为自动广告选择广告投放量。
  8. （可选）在“排除的网页”部分中，点击 管理 可阻止特定网页展示自动广告。
  9. 点击 应用到网站。

注意：确保您已将 AdSense 代码放置到您网站的每个网页上。广告最多可能需要一个小时才会展示在网页上。

按广告单元

广告单元是指在同一段 AdSense 广告代码的作用下显示出来的一个或多个 Google 广告。您可以在 AdSense 帐号的广告页面上创建、自定义和管理广告单元。利用广告单元，您可以掌控广告的展示位置；利用原生广告单元，您可以更灵活地进行自定义设置。

广告单元的类型

AdSense 提供多种不同类型的广告单元。如果展示广告单元不符合您网站的要求，不妨试试其他更具特色的广告单元：

  • 展示广告单元
    • 这种格式的广告适用范围广，在任何空间都能投放。
    • 默认情况下，展示广告属于自适应广告，也就是说它们会自动根据您的页面布局和用户的设备屏幕调整自身尺寸。
    • 这种格式的广告可进行自定义，以显示固定尺寸的广告。
    • 此外，这种格式的广告还与 AMP 网页兼容。
  • 信息流广告单元
    • 在信息流（例如，文章或产品列表）内投放的原生广告，看起来十分自然，可提供良好的用户体验。
  • 文章内嵌广告单元
    • 完美融入网页段落之间的原生广告，可增强用户的阅读体验。
  • 匹配内容单元
    • 一种内容推荐功能，可向网站访问者宣传您的内容，有望提升收入、网页浏览量并延长用户在网站上停留的时间。

展示广告（推荐）

使用范围广，在任何空间都能投放。

要新建可在您的帐号中管理的展示广告单元，请按以下步骤操作：

  1. 登录您的 AdSense 帐号。
  2. 点击 广告 接着点击 概览。
  3. 点击 “按广告单元”。
  4. 点击 展示广告。
  5. 为此广告单元命名。建议您使用具有唯一性的描述性名称，便于您今后轻松找到此广告单元。
  6. 在“广告尺寸”部分，选择您想要展示的广告的尺寸：
    • 建议您将 自适应 选项保持选中状态。自适应广告会自动根据您的页面布局和用户的设备屏幕调整自身尺寸。详细了解展示广告单元的自适应行为。
    • 如果您更倾向于自行指定在您的网页上展示何种尺寸的广告，请选择 固定尺寸，然后输入所需的宽度和高度。请注意，固定尺寸的广告单元可投放的广告数量可能较少，因而所创造的收入也可能不如采用自适应尺寸的广告单元。有关详情，请参阅固定尺寸的展示广告单元指南。
    • 提示：不妨参阅最常见的固定广告尺寸示例。
  7. 点击 保存并获取代码。
  8. 复制广告单元代码并将其粘贴在要展示广告的网页上，放在 <body><body/> 标记之间。
  9. 点击完成。

通常，广告只需几分钟便会展示在网页上，但有时也可能会需要长达一个小时。如果一小时后广告仍未展示，请前往 网站 页面查看您的网站是否处于“准备就绪”状态。

信息流广告

与您网站的外观浑然一体，可以自然地展示在推送的文章资讯以及连续显示的产品或服务介绍之间。

您可以通过两种方式创建信息流广告单元。最简便快捷的方法是让 Google 扫描您的网页，然后自动为您制作广告。另外，您也可以手动制作信息流广告。

注意：如果您的信息流是纯文本，请使用手动方法制作信息流广告。

  1. 登录您的 AdSense 帐号。
  2. 点击 广告。
  3. 点击 广告单元。
  4. 选择 信息流广告。
  5. 选择要如何制作信息流广告：
    • 让 Google 提供样式建议（推荐）
    • 手动创建广告样式
  6. 复制信息流广告代码并粘贴到您网站上信息流的 HTML 中。

制作信息流广告详情参考 https://support.google.com/adsense/answer/9185051?hl=zh-Hans

文章内嵌广告

同样与您的网站浑然一体，与文章和内容页面完美融合。

要创建文章内嵌广告单元，请按以下步骤操作：

  1. 登录您的 AdSense 帐号。
  2. 点击 广告。
  3. 点击 广告单元。
  4. 点击 文章内嵌广告。
  5. 为文章内嵌广告单元指定名称。
    • 建议您为文章内嵌广告单元的名称添加诸如“Native”（“原生”）之类的前缀，以帮助您跟踪其效果。
  6. 设置您的广告样式，使其与您的内容相匹配。如需了解详情，请参阅文章内嵌广告设置。
  7. 通过在预览区域更改容器宽度，测试您的广告在不同尺寸屏幕上的外观。使用拖动手柄更改宽度。
  8. 点击 保存并获取代码。
  9. 复制文章内嵌广告代码并将其粘贴到您网站网页的 HTML 中。 建议在文章前两段下方放置代码。

重要提示：如果您想在网页上放置多个文章内嵌广告，请务必在广告之间放置足够的内容，尽可能避免对读者形成干扰。

文章内嵌自适应广告尺寸：

请注意，默认情况下文章内嵌广告属于自适应广告，也就是说它们可根据观看设备自动调整尺寸。在处于纵向模式的移动设备上，文章内嵌广告会展开以占据用户屏幕的整个宽度。在桌面设备和采用其他配置模式的移动设备上，文章内嵌广告的宽度始终等于其所在的父级容器（<div>、<iframe> 等）的宽度。（请注意，文章内嵌广告的最小宽度为 250 像素）。AdSense 会自动调整文章内嵌广告的高度。

NexT 广告代码插入位置

由于是博客网站，所以第二种信息流广告没有投入使用，这里主要使用了第一种和第三种。这里，提供几种针对 Hexo NexT 主题广告代码插入位置的操作:

创建 google-adsense.swig

首先在 themes/next/layout/_custom 目录下，新建 google-adsense.swig 文件，并将对应广告单元的代码插入其中。

然后在需要展示广告的位置插入如下代码：

1
{{ partial('_custom/google-adsense.swig') }}

插入评论区

将下列代码插入 themes/next/layout/_partials/comments.swig 文件末尾即可：

1
{{ partial('_custom/google-adsense.swig') }}

插入侧边栏

将下列代码插入 themes/next/layout/_macro/sidebar.swig 文件中 <div class=”sidebar-inner”></div> 的最下侧即可：

1
{{ partial('_custom/google-adsense.swig') }}

如：

1
2
3
4
<div class="sidebar-inner">
  ...
  {{ partial('_custom/google-adsense.swig') }}
</div>

插入文章中

编辑 themes/next/layout/_macro/post.swig 文件，将下面的 include 语句添加到 post body 中：

1
{{ partial('_custom/google-adsense.swig') }}

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{#################}
{### POST BODY ###}
{#################}
<div class="post-body{%- if post.direction and post.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}" itemprop="articleBody">
  ...
  {%- if is_index %}
    ...
    {% else %}
      {{ post.content }}
    {%- endif %}
  {% else %}
    {{ partial('_custom/google-adsense.swig') }}
    {{ post.content }}
  {%- endif %}
</div>

{#####################}
{### END POST BODY ###}
{#####################}

注意事项

在成功接入 AdSense 广告之后，并不算结束，Google 会根据几种方式和数据判断广告点击是否作弊，从而注销你的账号。

  • 作弊广告点击者的 IP 地址与你 Adsense 账户登录 IP 地址相同
  • 作弊广告点击的 CTR 数据太高
  • 作弊广告点击者的 IP 地址来自同一个地理区域
  • 根据 Cookies 判断作弊 Adsense 广告点击
  • 作弊广告点击者页面停留时间太短
  • 直接访问者的广告点击率过高
  • 流量小但广告点击率高
  • 在网页上用文字提示请求鼓动点击广告

References

https://support.google.com/adsense/answer/9130038

https://support.google.com/adsense/answer/9261307?hl=zh-Hans&ref_topic=9261304

https://support.google.com/adsense/answer/9261306?hl=zh-Hans&ref_topic=9261304

https://support.google.com/adsense/answer/9183549?hl=zh-Hans&ref_topic=9183242