WordPress 實作 UTM 參數自動追蹤功能筆記

前言

在行銷活動中，UTM 參數（如 utm_source、utm_medium、utm_campaign）是分析流量來源的重要依據。但當訪客瀏覽網站內頁時，這些參數往往會遺失，導致追蹤不完整。本文針對 WordPress 平台，介紹如何利用 PHP 與 JavaScript，實現 UTM 參數的自動儲存與補充，確保參數在整個瀏覽過程中不會消失。

儲存 UTM 參數到 Cookie

在 WordPress 主題的 functions.php 中，我們透過 init 鉤子檢查 URL 是否帶有 UTM 參數，若有則將其經過安全處理後存入 Cookie，並設定有效期限為 30 天。關鍵程式碼如下：

function ks_store_utm_in_cookie() {
 if (isset($_GET['utm_source']) || isset($_GET['utm_medium']) || isset($_GET['utm_campaign'])) {
 $utm_data = array_filter([
 'utm_source' => isset($_GET['utm_source']) ? sanitize_text_field($_GET['utm_source']) : '',
 'utm_medium' => isset($_GET['utm_medium']) ? sanitize_text_field($_GET['utm_medium']) : '',
 'utm_campaign' => isset($_GET['utm_campaign']) ? sanitize_text_field($_GET['utm_campaign']) : '',
 ]);

 // 儲存 UTM 到 Cookie
 setcookie('utm_data', json_encode($utm_data), time() + (30 * DAY_IN_SECONDS), '/');
 }
}
add_action('init', 'ks_store_utm_in_cookie');

動態補充 UTM 參數到當前網址

為了避免使用者在瀏覽其他頁面時丟失 UTM 參數，我們在頁面底部（wp_footer）注入 JavaScript。此腳本會讀取 Cookie 中的 UTM 資料，並判斷當前網址是否缺少 utm_source，若缺少則動態將參數附加到網址，且不刷新頁面。核心程式碼片段：

function ks_add_utm_to_current_url() {
 ?>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
 const utmData = getCookie('utm_data');
 if (utmData) {
 const utmParams = JSON.parse(utmData);
 const queryString = Object.entries(utmParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');

 const currentUrl = new URL(window.location.href);

 // 如果網址中沒有 utm_source，補充 UTM 參數
 if (!currentUrl.searchParams.has('utm_source') && queryString) {
 currentUrl.search = currentUrl.search ? `${currentUrl.search}&${queryString}` : `?${queryString}`;
 window.history.replaceState(null, '', currentUrl.toString());
 }
 }

 // 取得 Cookie 值的函數
 function getCookie(name) {
 const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
 if (match) return decodeURIComponent(match[2]);
 return null;
 }
 });
 </script>
 <?php
}
add_action('wp_footer', 'ks_add_utm_to_current_url');

功能解析

  • PHP 部分：
    • 偵測 URL 中的 UTM 參數並存入 Cookie，確保 30 天內可持續追蹤。
  • JavaScript 部分：
    • 從 Cookie 讀取 UTM 資料。
    • 若當前網址缺少 UTM 參數，動態補充並更新網址，不刷新頁面。

使用方法

  1. 編輯 WordPress 主題的 functions.php，貼入上述 PHP 與 JavaScript 程式碼。
  2. 在瀏覽器中輸入帶有 UTM 參數的網址，例如： https://example.com/?utm_source=google&utm_medium=cpc&utm_campaign=winter-sale
  3. 確認瀏覽其他頁面時，網址仍保有 UTM 參數。
  4. 使用瀏覽器開發者工具檢查 Cookie，確認 utm_data 已成功儲存。

注意事項

  • 確保網站啟用 JavaScript，否則動態補充功能無法運作。
  • 若使用 CDN 或快取插件，請測試是否影響此功能。

完整程式碼

<?php
// 儲存 UTM 參數到 Cookie
function ks_store_utm_in_cookie() {
 if (isset($_GET['utm_source']) || isset($_GET['utm_medium']) || isset($_GET['utm_campaign'])) {
 $utm_data = array_filter([
 'utm_source' => isset($_GET['utm_source']) ? sanitize_text_field($_GET['utm_source']) : '',
 'utm_medium' => isset($_GET['utm_medium']) ? sanitize_text_field($_GET['utm_medium']) : '',
 'utm_campaign' => isset($_GET['utm_campaign']) ? sanitize_text_field($_GET['utm_campaign']) : '',
 ]);

 setcookie('utm_data', json_encode($utm_data), time() + (30 * DAY_IN_SECONDS), '/');
 }
}
add_action('init', 'ks_store_utm_in_cookie');

// 動態補充 UTM 參數到當前網址
function ks_add_utm_to_current_url() {
 ?>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
 const utmData = getCookie('utm_data');
 if (utmData) {
 const utmParams = JSON.parse(utmData);
 const queryString = Object.entries(utmParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');

 const currentUrl = new URL(window.location.href);

 if (!currentUrl.searchParams.has('utm_source') && queryString) {
 currentUrl.search = currentUrl.search ? `${currentUrl.search}&${queryString}` : `?${queryString}`;
 window.history.replaceState(null, '', currentUrl.toString());
 }
 }

 function getCookie(name) {
 const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
 if (match) return decodeURIComponent(match[2]);
 return null;
 }
 });
 </script>
 <?php
}
add_action('wp_footer', 'ks_add_utm_to_current_url');
?>
標籤
分享

相關文章