如何在 WordPress 網站中實現 UTM 參數自動追蹤功能

作者:

在行銷活動中，追蹤 UTM 參數（例如 utm_source、utm_medium、utm_campaign）是分析流量來源的關鍵。然而，當訪問者瀏覽網站內頁時，這些參數通常會消失。為了解決這個問題，我們可以使用 PHP 和 JavaScript，在 WordPress 網站中實現以下功能：

  1. 儲存訪問者的 UTM 參數到 Cookie 中。

  2. 動態地將 UTM 參數補充到當前頁面的網址中，以確保參數不丟失。

教學步驟

以下是具體的程式碼和操作方法：

1. 儲存 UTM 參數到 Cookie

我們將在 WordPress 的 functions.php 文件中添加 PHP 程式碼，檢測訪問者的 UTM 參數，並將其儲存到 Cookie 中。

PHP 程式碼

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');

2. 動態將 UTM 參數補充到當前頁面的網址

接下來，我們將使用 JavaScript，動態檢查 Cookie 中是否有儲存的 UTM 資料，並將其附加到當前頁面的網址中。

JavaScript 程式碼

這段程式碼會在 wp_footer 中被載入，確保網頁加載完成後才執行。

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');

3. 功能解析

  • PHP 部分：

    • 檢測到 URL 中包含的 UTM 參數時，將其存入使用者的 Cookie。

    • 確保未來 30 天內都能追蹤這些參數。

  • JavaScript 部分：

    • 從 Cookie 中讀取 UTM 資料。

    • 如果當前頁面網址中沒有這些參數，則將其動態添加回網址。

    • 使用 window.history.replaceState 更新網址而不刷新頁面。

4. 使用方法

  1. 將程式碼加入 WordPress：

    • 打開主題的 functions.php 文件。

    • 將上述 PHP 和 JavaScript 程式碼複製並貼上。

  2. 測試功能：

    • 在瀏覽器中輸入帶有 UTM 參數的 URL，例如：

      https://example.com/?utm_source=google&utm_medium=cpc&utm_campaign=winter-sale

    • 確認頁面網址是否保持這些參數，即使進入其他頁面或重新整理。

  3. 驗證效果：

    • 使用瀏覽器開發工具檢查 Cookie，確認 utm_data 已成功儲存。

    • 點擊站內其他連結，檢查 UTM 參數是否自動附加到新頁面。

5. 注意事項

  • 確保網站開啟了 JavaScript，否則動態附加參數的功能無法正常運作。

  • 如果網站使用了 CDN 或緩存插件，請測試是否影響功能運作。

透過這個方法，你可以輕鬆實現 UTM 參數的全站追蹤功能，幫助分析流量來源並提升行銷效率！

發佈留言