​
Pixel Integration for Magento

​
Introduction

This document provides instructions on how to integrate Order Tracking Pixel with Magento.

Our Magento implementation includes the Order Tracking Pixel pre-installed on the default Thank you page.

If you are utilizing the default Thank you page, no further action is required.

​
Prerequisites

  • Magento 2.x installed
  • Admin access to your Magento backend files
  • Videowise Pixel Tracking activated from Videowise Application

​
Integration Options

There are two options to integrate the Order Tracking Pixel on other pages in your Magento store:

​
Option 1: Using Magento XML Frontend Extensions

You can add our already defined PHTML block to your preferred location using Magento XML frontend extensions. This method involves updating your layout XML file to include the tracking pixel block. Here is an example:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- Pixel Tracking for Successful orders -->
        <referenceContainer name="your-container-name">
            <block class="Videowise\VideowiseApp\Block\VideowiseTrackingPixel" name="tracking.pixel" template="Videowise_VideowiseApp::tracking_pixel.phtml" />
        </referenceContainer>
    </body>
</page>

Replace your-container-name with the appropriate container name where you want the tracking pixel to be placed.

​
Option 2: Adding Custom JavaScript Code

Alternatively, you can add custom JavaScript code to your preferred location after a successful order. You will need to complete the necessary fields in the script. Here is an example:

<script>
(function() {
    const vwPixelUrl = 'https://assets.videowise.com/videowise-info-pixel.js.gz';
    const vwOrderNumber = {{ magentoOrderNumber }};
    const vwOrderGrandtotal = {{ magentoOrderTotal }};
    const vwCurrency = {{ magentoOrderCurrency }};
    const vwOrderTotalProducts = {{ magentoOrderTotalCountItems }};
    const vwShop = {{ magentoOrderStoreId }};
    
    const script = document.createElement('script');
    script.src = vwPixelUrl;
    script.onload = () => {
        window.vwPixel({
            orderId: vwOrderNumber,
            orderTotal: vwOrderGrandtotal,
            orderCurrency: vwCurrency,
            orderItems: vwOrderTotalProducts,
            shop: vwShop
        });
    };
    document.body.appendChild(script);
})();
</script>

Make sure to replace the placeholders ({{ ... }}) with the actual values from your Magento store.

All actual values can be retrieved manually with custom code or using our PHP public method getOrderData from Videowise\VideowiseApp\Block\VideowiseTrackingPixel which will return the following array:

[
    'orderId' => 123, // Last Order ID from User Session
    'orderTotal' => 123, // Order Total
    'orderCurrency' => 'USD', // Order Currency
    'orderItemsTotal' => 2, // Number of Order Products
    'storeId' => 1, // Order Store ID
]

​
Conclusion

You have successfully integrated Pixel with your Magento store. For further customization and advanced features, refer to our FAQ page.