AMP（Accelerated Mobile Pages）是一種以速度與效能為優先的網頁技術，廣泛應用於行動版網頁。然而，AMP 頁面對於 JavaScript 有嚴格限制，導致我們不能直接使用傳統的 Google AdSense 與 Google Analytics 嵌入碼。

本篇將帶你一步步完成 AMP 頁面中 AdSense 廣告與 GA4 的正確埋設，避免常見錯誤並通過 AMP 驗證。

一、AdSense 廣告在 AMP 的使用方式

1. 引入 AMP 廣告元件（放在 <head>）

<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

這段 script 是 AMP 廣告元件所需，只能放在 <head> 中。

 

2. 插入廣告（放在 <body> 任意位置）

<amp-ad
  width="100vw"
  height="320"
  type="adsense"
  data-ad-client="ca-pub-你的廣告帳號"
  data-ad-slot="你的廣告 slot ID"
  data-auto-format="rspv"
  data-full-width>
  <div overflow></div>
</amp-ad>

 

二、自動廣告（Auto Ads）

1. 引入 AMP Auto Ads 元件（放在 <head>）

<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>

 

2. 插入 AMP 自動廣告標籤（放在 <body> 最前面建議）

<amp-auto-ads
  type="adsense"
  data-ad-client="ca-pub-你的廣告帳號">
</amp-auto-ads>

這會讓 Google 自動在適合的位置插入廣告（例如段落之間或頁尾）。

 

三、AMP 中埋設 Google Analytics（GA4）

1. 引入 AMP Analytics 元件（放在 <head>）

<script async custom-element="amp-analytics"
  src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

 

2. 插入 Analytics 元件（放在 <body>）

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "G-你的GA4代碼",
        "config": {
          "G-你的GA4代碼": {
            "groups": "default"
          }
        }
      }
    }
  </script>
</amp-analytics>

傳統 gtag.js 無法使用在 AMP 中，必須改用這種方式！

 

驗證你的 AMP 頁面是否正確

 

 

在 AMP 頁面中正確插入廣告與分析碼雖有些限制，但一旦設置完成，就能兼顧 速度、體驗與收益。如果你有更多 AMP 網站開發需求，記得善用官方文件與驗證工具來確保品質！