WooCommerce 的自定义 DataLayer 代码 |GA4系列-解网

问：

我希望所有的专家都做得很好。https://brille-klubben.dk，我正在为客户的 WordPress WooCommerce 网站寻求解决方案。我需要在网站上跟踪购买事件。虽然我尝试了几种方法，但我已经能够成功地跟踪begin_checkout数据。但是，我的客户使用自定义重定向到另一个感谢页面，GTM4WP或PixelYourSite插件无法跟踪该页面。

考虑到这一点，我正在考虑在感谢页面上手动实现数据层。我对这个技术方面不是很熟悉，不知道有没有人可以帮我写代码来代替打印产品信息的动态代码。

感谢您的时间和专业知识。

这是演示代码，我需要用动态数据替换静态数据。

{
  event: "purchase",
  gsm: {uniqueEventId: 6, start: 1625823263950},
  ecommerce: {
    transaction_id: 174,
    affiliation: "Online Store",
    value: "2660",
    tax: "0",
    shipping: null,
    currency: "BDT",
    coupon: ",
    items: [
    {
        item_name: "Printed Kurta",
        item_id: 34,
        price: 2660,
        item_brand: "Gulljee",
        item_category: "UNSTITCHED",
        item_variant: "",
        quantity: 1
    }
    ]
  }
}

WooCommerce 的 Datalayer 购买跟踪自定义订单接收页面！

javascript php wordpress woocommerce google-datalayer

add_action('wp_footer', 'order_received_js_script');
function order_received_js_script() {
    // Only on order received" (thankyou)
    if( ! is_wc_endpoint_url('order-received') )
        return; // Exit

    $order_id = absint( get_query_var('order-received') ); // Get the order ID

    if( get_post_type( $order_id ) !== 'shop_order' ) {
        return; // Exit
    }

    $order = wc_get_order( $order_id ); // Get the WC_Order Object

    ob_start();

    echo '{
    event: "purchase",
    gtm: {uniqueEventId: 6, start: '.$order->get_date_created()->getTimestamp().'},
    ecommerce: {
        transaction_id: '.$order->get_order_number().',
        affiliation: "Online Store",
        value: "'.$order->get_total().'",
        tax: "'.$order->get_total_tax().'",
        shipping: '.$order->get_shipping_total().',
        currency: "'.$order->get_currency().'",
        coupon: "'.implode(",", (array) $order->get_coupon_codes()).'",
        items: [
            ';
    foreach( $order->get_items() as $item_id => $item ) :
        $product  = $item->get_product();
        $category = (array) wp_get_post_terms($item->get_product_id(), 'product_cat', array( 'fields' => 'names' ) );
        $category = ! empty($category) ? reset($category) : "";
        $brand    = (array) wp_get_post_terms($item->get_product_id(), 'product_brand', array( 'fields' => 'names' ) );
        $brand    = ! empty($brand) ? reset($brand) : "";
        $var_id   = $item->get_variation_id() ? : "";
        
        echo '{ 
            item_name: "'.$item->get_name().'",
            item_id: '.$item_id.',
            price: '.wc_get_price_to_display($product).',
            item_brand: "'. $brand .'",
            item_category: "'. $category .'",
            item_variant: "'. $var_id .'",
            quantity: '.$item->get_quantity().'
            }
        ';
    endforeach;
    echo ']
    }
    }';
    $data = ob_get_clean();

    ?>
    <script>
        const myDataLayer = '<?php echo $data;?>';
    </script>
    <?php
}

您需要调整此代码，以便从自定义感谢页面获取正确的订单 ID，并进行一些修改以将其集成到您的脚本中。

WooCommerce 的自定义 DataLayer 代码 |GA4系列

Custom DataLayer Code for WooCommerce | GA4

评论

评论