如何在Wordpress AMP網站上使用Google Analytics 4追蹤外部連結事件

內容目錄

Toggle

AMP 網站

AMP網站（Accelerated Mobile Pages）是一種特殊設計的網頁，旨在優化移動設備的瀏覽體驗。它通過簡化網頁的內容和結構，減少了網頁的載入時間，從而提高了網頁的加載速度和性能。AMP網站在保持網頁基本功能的同時，通過刪減不必要的複雜元素，為用戶提供了更快、更簡潔、更易於閱讀的網頁體驗。

除了提高用戶體驗外，使用AMP網站還有其他好處。因為網頁速度是搜索引擎排名的一個因素，使用AMP網站可以提高網頁的搜索排名。此外，AMP網站還可以減少網頁彈跳率，提高轉換率。

雖然AMP網站有不少好處，但Google對於自家的AMP技術和Google Analytics 4的文件支援卻有限，一般人很難找到如何在AMP網站上設定自定義的Google Analytics 4事件追蹤的資訊。在這份文件中，我們介紹了如何在Wordpress的AMP網站上設定GA4事件追蹤。通過對外部連結的追蹤，您可以更好地了解用戶在您的網站上的行為和互動，並根據這些數據進行分析和優化。

如何在Wordpress AMP網站上使用GA4追蹤自定義的外部連結事件 (outbound link and scroll)

在Wordpress加入GA4事件追蹤程式碼

如果您只是想要使用WordPress插件來輕鬆添加程式碼片段，可以使用Code Snippets插件。這個插件可以添加、管理和執行任何PHP、JavaScript或CSS程式碼片段，而不需要修改主題的functions.php文件或安裝其他插件。我們可以在WordPress後台中編輯、啟用或禁用這些片段。如果需要添加一些自定義功能或調整某些設置，這個插件非常有用。

💡 如果使用這個插件及以下範例，要注意不需要另外再設定其他Google Analytics 4插件，包括Google Site Kits。若已經設定了Google Site Kits或其他插件上的GA4分析，可以將GA4部份關掉。此方法已經包括基本的GA4設定並加入自定義事件。

加入GA4外部連結追蹤

我們將使用一個範例作說明。這裡我們使用Code Snippets插入一段程式碼來設定一個追蹤外部連結到贊助網站的事件。透過這個事件，可以判斷使用者是否連結到贊助網站。這裡我們假設此網站的網頁中已經設定了外連到*.booking.com的連結。

add_action( 'wp_head', function () { ?>

<amp-analytics type="googleanalytics" config="<https://amp.analytics-debugger.com/ga4.json>" data-credentials="include">
<script type="application/json">
{
    "vars": {
          "GA4_MEASUREMENT_ID": "G-**<Your Measurement ID>**",
          "GA4_ENDPOINT_HOSTNAME": "www.google-analytics.com",
          "DEFAULT_PAGEVIEW_ENABLED": true,    
          "GOOGLE_CONSENT_ENABLED": false,
          "WEBVITALS_TRACKING": true,
          "PERFORMANCE_TIMING_TRACKING": true,
	  "SEND_DOUBLECLICK_BEACON": true
    },
    "triggers": {
	  "outgoing_clicks_hotel": {
	        "on": "click",
		"selector": "a[href*='**.booking.com**']",
		"request": "ga4Event",
		"vars": {
	             "ga4_event_name": "outgoing_click_hotel"
	        },
		"extraUrlParams": {
		     "event__str_timezone_code": "${timezoneCode}"
		}
	  }
    }
} 
</script>
</amp-analytics>

<?php } );

這邊我們使用自定義的triggers設定需要發送給GA4的事件。之後在GA4上，我們會看到新的自定義事件叫作outgoing_click_hotel，這是由ga4_event_name這個變數所控制的。透過以上設定，在使用者click任何外連到booking.com這個網域的連結時會發送這個事件給GA4。在此事件中，我們可以使用event__str_<name>的語法自行定義額外的參數，例如在此範例中我想定義timezone_code這個參數，就在extraUrlParams中加入一個event__str_outgoing_click_type。

在GA4上進行測試

若需要測試剛剛定義的事件，可以在自己的網站上嘗試點擊剛剛設定的外部連結，然後到GA4的「報表」→「即時」當中看是否有看到我們定義的新事件。如果設定成功，在事件計數的統計中應該可以找到剛剛定義的outgoing_click_hotel事件。

如果在即時畫面中有outgoing_click_hotel的事件，點擊這個事件名稱我們可以看到所有這個事件中包括的事件參數。如果你使用剛才的範例，事件中會看到timezone_code這個參數。除了我們自定義的參數，有一些其他預設參數也包含在其中，例如page_title。點擊這些參數會看到詳細內容，這裡可以判斷哪些對我們之後想看到的分析有用。