Custom DataLayer Code for WooCommerce | GA4

Question

I hope all the experts are doing well. I am seeking a solution for my client's WordPress WooCommerce website, https://brille-klubben.dk. I need to track purchase events on the website. While I have tried several methods, I have been able to track begin_checkout data successfully. However, my client uses a custom redirection to another thank you page, which the GTM4WP or PixelYourSite plugins cannot track.

Considering this, I am considering manually implementing the data layer on the thank you page. I am not very familiar with this technical aspect, and I'm wondering if anyone can assist me in writing the code to replace the dynamic code for printing product information.

Thank you for your time and expertise.

Here is the demo code, I need to replace static data with dynamic.

{
  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
    }
    ]
  }
}

Datalayer for WooCommerce Purchase tracking for custom order received page!

LoicTheAztec · Answer 1 · 2023-08-05T12:23:32.363

Here is a code example based on this similar answer that uses WooCommerce normal Thankyou page:

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
}

You will need to adapt this code to get the correct order ID from the custom Thankyou page, and make some modifications to integrate it in your script.

Thanks a lot for the effort, but I'm still confused if I have to put my custom thank you page endpoint (tak-for-din-bestilling) instead of order-received, and put the code to functions.php or in the footer of the custom thankyou page? — Anamul Hoque Sumon, Aug 05 '23 at 18:12
I can't tell, the choice is up to you. Most importantly, you need to get the correct order ID from somewhere… As this answer works and answer your initial question, could you please accept this answer (To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in), thank you. — LoicTheAztec, Aug 05 '23 at 18:41

Custom DataLayer Code for WooCommerce | GA4

1 Answers1