在收到的 WooCommerce 订单的 HEAD 中包含一些 javascript 代码

Question

目标：我需要在 Woocommerce 订单确认页面（购买后立即出现的页面）上包含一个用于特定跟踪的事件片段。我必须将 order_id、currency 和 total 传递给跟踪器。这是我写的代码：

function wh_CustomReadOrder($order_id)
{
    //getting order object
    $order = wc_get_order($order_id);
    echo  "<script> gtag('event', 'conversion', { 'send_to': 'AW-995109926/CWeECK-epPYBEKbYwNoD', 'value': '".$order->get_total()."', 'currency': '".$order->currency."', 'transaction_id': '".$order_id."' }); </script>";
}
add_action('woocommerce_thankyou', 'wh_CustomReadOrder');

这会在页面上正确包含代码并将相关信息传递给跟踪器。但是这段代码并没有出现在页面的<head>中；它出现在 body 中。根据说明，此代码必须放在 <head>.

中

我还没有找到允许这种控制的片段插件。还有其他方法可以实现吗？

如果我要在 <head> 的所有页面上包含此代码，但将其包装在检查 url、/checkout/order-received/{order-id}/ 并触发的 if 语句中如果为真，是否可能或有其他方法？

Answer 1

您可以使用以下代码将您的 Javascript 代码注入“已收到订单”页面的头部：

add_action( 'wp_head', 'wc_custom_redirect_after_purchase' );
function wc_custom_redirect_after_purchase() {
    if ( ! is_wc_endpoint_url('order-received') ) return;
    global $wp;

    // If order_id is defined
    if ( isset($wp->query_vars['order-received']) && absint($wp->query_vars['order-received']) > 0 ) :

    $order_id       = absint($wp->query_vars['order-received']); // The order ID
    $order          = wc_get_order($order_id ); // The WC_Order object
    
    $send_to        = 'AW-995109926/CWeECK-epPYBEKbYwNoD';
    $transaction_id = empty($order->get_transaction_id()) ? $order_id : $order->get_transaction_id(); // The transaction ID
    
    ?>
    <script type="text/javascript">
    gtag('event', 'conversion', {
        'send_to'       : '<?php echo $send_to; ?>', 
        'value'         : '<?php echo $order->get_total(); ?>', 
        'currency'      : '<?php echo $order->get_currency(); ?>', 
        'transaction_id': '<?php echo $transaction_id; ?>' 
    });
    </script>
    <?php
    endif;
}

代码进入活动子主题（或活动主题）的 functions.php 文件。应该可以。

在收到的 WooCommerce 订单的 HEAD 中包含一些 javascript 代码

Include some javascript code in HEAD on WooCommerce Order received

javascript

php

woocommerce

hook-woocommerce

gtag.js