Conversion and E-commerce Tracking in uCommerce

In this post, I am Going to show you guys, how to add Google Adwords Conversion Tracking and Google Analytics Ecommerce Tracking in uCommerce using only admin panel(dashboard) as well as through Tag Manager.

So here begins….

Steps to add Tracking Code in uCommerce:

Here I have Created Multiple steps to make it easy to understand about implementation of tracking code.

Login to dashboard.
Go to OrderApproved page (the page the user gets redirected to, after the payment).
Add below Code to fetch order details.

//fetching order details
var orderid = order.OrderNumber;
var total = String.Format("{0:0.00}", order.OrderTotal).Replace(",", ".");
var tax = String.Format("{0:0.00}", order.VAT).Replace(",", ".");
var shipping = String.Format("{0:0.00}", order.ShippingTotal).Replace(",", ".");
var city = order.BillingAddress.City;
var state = order.BillingAddress.State;
var country = order.BillingAddress.Country.Name;

Now we will add Tracking code in order confirmation/order approved page (only through dashboard):

To add Conversion Tracking Code.

//Google Adwords Conversion Tracking code 
var conversionID = "ID HERE";
var conversionLabel = "Conversion label";
var conversionCurrency="Currency Code";

<!-- Google Code for OrderCompleted Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
    var google_conversion_id = @conversionID;
    var google_conversion_language = "en";
    var google_conversion_format = "2";
    var google_conversion_color = "ffffff";
    var google_conversion_label = "@conversionLabel";
    var google_conversion_value = @total;
    var google_conversion_currency = "@conversionCurrency";
    var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
    <div style="display:inline;">
        <img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/@conversionID/?value=@total&currency_code=@conversionCurrency&label=@conversionLabel&guid=ON&script=0"/>
    </div>
</noscript>

To add Google Analytics Ecommerce Tracking (universal Analytics):

// Google analytics Ecommerce tracking setup using universal google analytics

    <script type="text/javascript">
    ga('require', 'ecommerce', 'ecommerce.js');

    ga('ecommerce:addTransaction', {
        id: '@orderid', // Transaction ID - this is normally generated by your system.
        affiliation: 'your store name', // Affiliation or store name
        revenue: @total, // Grand Total
        shipping: @shipping , // Shipping cost
        tax: @tax  // Tax.
    });


    @foreach (OrderLine orderline in order.OrderLines)
    {
        string lineSku = string.IsNullOrEmpty(orderline.VariantSku) ? orderline.Sku : orderline.VariantSku;
        <text>
        ga('ecommerce:addItem', {
            id: '@orderid', // Transaction ID.
            sku: '@lineSku', // SKU/code.
            name: '@orderline.ProductName', // Product name.
            category: '@string.Empty', // Category or variation.
            price: @orderline.Price.ToString("N").Replace(",", "."), // Unit price.
            quantity: @orderline.Quantity // Quantity.
        });

        </text>
    }
    ga('ecommerce:send');

</script>

To add Google Analytics Ecommerce Tracking (Asynchronous Analytics):

// Google analytics Ecommerce tracking setup using Asynchronous  google analytics

    <script type="text/javascript">
    _gaq.push(['_addTrans',
            '@orderid', // order ID - required
            'your store name', // affiliation or store - 
            '@total',// total - required. Bemærk decimaladskiller er .
            '@tax', // tax/Moms
            '@shipping',// shipping             - 
            '@city', // city            
            '@state',// state or province   - 
            '@country'// country            
        ]);

    @foreach (OrderLine orderline in order.OrderLines)
    {
        string lineSku = string.IsNullOrEmpty(orderline.VariantSku) ? orderline.Sku : orderline.VariantSku;
        <text>
        _gaq.push(['_addItem',
                    '@orderid', // order ID - necessary to associate item with transaction
                    '@lineSku', // SKU/code – required    
                    '@orderline.ProductName', // product name - required    
                    '@string.Empty', // category 
                    '@orderline.Price.ToString("N").Replace(",", ".")', // unit price - required
                    '@orderline.Quantity' // quantity - required
            ])
        ;
        </text>
    }
    _gaq.push(['_trackTrans']);
</script>

If you want to add/trigger above tracking code through Google Tag Manager, skip Step 4.
In this case we have to add some different Type of code in orderApproved page(order Conversion Code).But for this you must have access to your Google Tag Manager (GTM), as well as GTM container code must be available on you website. if you have required access then we can go further.

To add Adwords Conversion Tracking Code(pass order total and currency value to GTM):

//Google Adwords Conversion Tracking code (GTM-dataLayer)
    var conversionCurrency="Currency Code";
    <script type="text/javascript">
        var dataLayer=window.dataLayer||[];
        dataLayer.push({'event':'google_conversion','totalVal':'@total','conversionCurrency':'@conversionCurrency'});
    </script>

Now we have to trigger Adwords Conversion Code through GTM on ‘google_conversion‘ event and to set conversion value and currency, you have create 2 dataLayer variable i.e totalVal and conversionCurrency and set it to conversion tag.

To add Google Analytics Ecommerce Tracking Code( pass complete order details to GTM in a google prescribed format).

<script>
window.dataLayer = window.dataLayer || [];

var transProductDetails=[];

  @foreach (OrderLine orderline in order.OrderLines)
    {
        string lineSku = string.IsNullOrEmpty(orderline.VariantSku) ? orderline.Sku : orderline.VariantSku;
        <text>
        var transProduct={
               'sku': '@lineSku',
               'name': '@orderline.ProductName',
               'category': '@string.Empty',
               'price': @orderline.Price.ToString("N").Replace(",", "."),
               'quantity': @orderline.Quantity
           };
           transProductDetails.push(transProduct);
        </text>
    }
dataLayer.push({
   'event':'ecommerceTrackEvent',
   'transactionId': '@orderid',
   'transactionAffiliation': 'your store name',
   'transactionTotal': @total,
   'transactionTax': @tax,
   'transactionShipping': @shipping,
   'transactionProducts': transProductDetails
});
</script>

Now you have to trigger Google Analytics Tracking through GTM on ‘ecommerceTrackEvent’ event.

Since this blog is getting lengthy, so I will write some more blog on Conversion Tracking and Analytics Ecommerce Tracking through GTM. But for now I am taking break.

If you have any query kindly leave your comment below or you can contact us by get in touch.

See you again… Have a good day ahead with lots of fun…

2 thoughts on “Conversion and E-commerce Tracking in uCommerce”

Arica Dakes says:

May 14, 2017 at 5:23 am

Normally I do not read post on blogs, but I wish to say that this write-up very forced me to try and do so! Your writing style has been amazed me. Thanks, very nice post.

eebest says:

July 19, 2017 at 9:32 pm

“Hi there. I found your web site via Google at the same time as looking for a comparable matter, your site got here up. It appears to be good. I have bookmarked it in my google bookmarks to come back then.”

Notes On Click