WooCommerce下单后dataLayer代码不执行问题求助

算力阿峰

2026-6-24

问题解决：让WooCommerce钩子输出的dataLayer事件代码执行

原因分析

直接echo JS字符串会被浏览器当成普通文本输出，无法被解析执行。需要把代码包裹在<script>标签内，同时确保输出到页面的正确位置，避免DOM未加载完成的问题。

正确实现方案

方法1：使用WordPress官方内联脚本方法（推荐）

这种方式更符合WordPress开发规范，能避免脚本加载顺序问题：

add_action('woocommerce_checkout_order_processed', 'send_datalayer_pre_purchase_event');
function send_datalayer_pre_purchase_event($order_id) {
    // 获取订单对象
    $order = wc_get_order($order_id);
    if (!$order) return;

    // 整理事件所需数据
    $datalayer_event = array(
        'event' => 'pre_purchase',
        'order_id' => $order_id,
        'total' => $order->get_total(),
        'currency' => $order->get_currency()
    );

    // 转义为安全的JSON格式
    $event_json = wp_json_encode($datalayer_event);

    // 注册内联脚本，依赖jQuery确保DOM就绪后执行
    wp_add_inline_script('jquery', "window.dataLayer = window.dataLayer || []; dataLayer.push($event_json);");
}

方法2：直接输出带`<script>`标签的代码

如果偏好更直观的写法，可直接输出包裹好的脚本代码：

add_action('woocommerce_checkout_order_processed', 'send_datalayer_pre_purchase_event');
function send_datalayer_pre_purchase_event($order_id) {
    $order = wc_get_order($order_id);
    if (!$order) return;

    $order_total = $order->get_total();
    ?>
    <script>
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
            'event': 'pre_purchase',
            'order_id': '<?php echo esc_js($order_id); ?>',
            'total': <?php echo esc_js($order_total); ?>
        });
    </script>
    <?php
}