跨多页面捕获UTM参数异常问题排查

问题描述 #

• 用户通过带UTM参数的链接进入页面并提交表单时，数据库能正常捕获UTM值；但用户跳转至其他页面后返回提交表单，获取到的是organic默认文本而非原始UTM参数值
• 现有代码尝试通过PHP Session存储UTM参数，但带UTM参数访问页面时，仍返回organic默认值，仅无参数访问时能得到预期结果

尝试方案 #

通过Session持久化UTM参数，逻辑如下：

1. 初始化Session，优先从Session读取UTM值
2. 若Session无对应值，则从URL参数获取，否则设置为默认文本
3. 将最终值存入Session，再通过JS写入表单隐藏字段

问题代码 #

function record_utms(){ 
if (!session_id()) {
 session_start();
}
//checking if the session is exist or not
    $utm_source = isset($_SESSION['utm_source']) ? $_SESSION['utm_source'] : null;
    $utm_medium = isset($_SESSION['utm_medium']) ? $_SESSION['utm_medium'] : null;
    $utm_campaign = isset($_SESSION['utm_campaign']) ? $_SESSION['utm_campaign'] : null;
    $utm_term = isset($_SESSION['utm_term']) ? $_SESSION['utm_term'] : null;

    // If the session does not exist then set session if the URL have utm fields else organic
    if ($utm_source === null) {
        $utm_source = isset($_REQUEST['utm_source']) ? $_REQUEST['utm_source'] : 'organic';
    }
    if ($utm_medium === null) {
        $utm_medium = isset($_REQUEST['utm_medium']) ? $_REQUEST['utm_medium'] : 'website';
    }
    if ($utm_campaign === null) {
        $utm_campaign = isset($_REQUEST['utm_campaign']) ? $_REQUEST['utm_campaign'] : 'webpage';
    }
    if ($utm_term === null) {
        $utm_term = isset($_REQUEST['utm_term']) ? $_REQUEST['utm_term'] : '';
    }

//asign session here
        $_SESSION['utm_source'] = $utm_source;
        $_SESSION['utm_medium'] = $utm_medium;
        $_SESSION['utm_campaign'] = $utm_campaign;
        $_SESSION['utm_term'] = $utm_term;
     

// below is the script to update the utm parameters value
        if(isset($_SESSION['utm_source'])){ 
            echo '<script type="text/javascript">
                    var utm_source = jQuery(".custom-zoho-form #utm_source");
                    var utm_medium = jQuery(".custom-zoho-form #utm_medium");
                    var utm_campaign = jQuery(".custom-zoho-form #utm_campaign");
                    //var utm_term = jQuery(".field_utm_term input");
                    if(utm_source){
                        utm_source.val("'.$utm_source.'");
                        utm_medium.val("'.$utm_medium.'");
                        utm_campaign.val("'.$utm_campaign.'");
                        //utm_term.val("'.$utm_term.'");
                    }
            </script>';
    }
    
    }
    add_action('wp_footer', 'record_utms');

核心问题分析 #

1. Session初始化时机错误：wp_footer钩子在页面底部执行，此时HTTP头已发送，导致session_start()无法正常启动Session，参数无法存入Session
2. JS元素判断逻辑失效：jQuery找不到元素时仍会返回对象，if(utm_source)永远为true，可能导致无效赋值

修复方案 #

1. 调整Session初始化时机 #

将Session初始化移至init钩子，确保在任何输出前启动Session：

add_action('init', function() {
    if (!session_id() && !headers_sent()) {
        // 设置Session有效期为7天，适配用户跨页面访问场景
        session_set_cookie_params([
            'lifetime' => 604800,
            'path' => '/',
            'domain' => $_SERVER['HTTP_HOST'],
            'secure' => is_ssl(),
            'httponly' => true,
            'samesite' => 'Strict'
        ]);
        session_start();
    }
});

2. 修正UTM参数存储与JS逻辑 #

优化代码逻辑，使用PHP7+空合并运算符简化判断，同时修复JS元素存在性判断：

function record_utms(){ 
    // 从Session读取现有值
    $utm_source = $_SESSION['utm_source'] ?? null;
    $utm_medium = $_SESSION['utm_medium'] ?? null;
    $utm_campaign = $_SESSION['utm_campaign'] ?? null;
    $utm_term = $_SESSION['utm_term'] ?? null;

    // 仅当Session无值时，从URL获取参数或设置默认值
    if (is_null($utm_source)) {
        $utm_source = $_REQUEST['utm_source'] ?? 'organic';
    }
    if (is_null($utm_medium)) {
        $utm_medium = $_REQUEST['utm_medium'] ?? 'website';
    }
    if (is_null($utm_campaign)) {
        $utm_campaign = $_REQUEST['utm_campaign'] ?? 'webpage';
    }
    if (is_null($utm_term)) {
        $utm_term = $_REQUEST['utm_term'] ?? '';
    }

    // 更新Session
    $_SESSION['utm_source'] = $utm_source;
    $_SESSION['utm_medium'] = $utm_medium;
    $_SESSION['utm_campaign'] = $utm_campaign;
    $_SESSION['utm_term'] = $utm_term;

    // 输出JS写入表单，用length判断元素是否存在
    if(isset($_SESSION['utm_source'])){ 
        echo '<script type="text/javascript">
                var utm_source = jQuery(".custom-zoho-form #utm_source");
                var utm_medium = jQuery(".custom-zoho-form #utm_medium");
                var utm_campaign = jQuery(".custom-zoho-form #utm_campaign");
                if(utm_source.length){
                    utm_source.val("'.$utm_source.'");
                    utm_medium.val("'.$utm_medium.'");
                    utm_campaign.val("'.$utm_campaign.'");
                }
        </script>';
    }
}
add_action('wp_footer', 'record_utms');

内容的提问来源于stack exchange，提问作者Naren Verma