osCommerce Google Analytics ecommerce tracking with Global Site Tag (gtag.js)

Standard

Google Analytics Ecommerce Tracking in Oscommerce (osCommerce eCommerce Tracking)

Ecommerce /E-commerce Tracking in Oscommerce using Google Tag Manager/Google Analytic

Recently one of client asked me to implement to e-commerce tracking on osCommerce with Global Site Tag (gtag.js). Because google recently updated Google Analytic Code with Global Site Tag (gtag.js), Not most people familiar with Global Site Tags (gtag.js) and How to implement E-commerce tracking with Global Site Tag (gtag.js).

osCommerce eCommerce Tracking with with Global Site Tag (gtag.js)

Because recently of Google Analytic universal tags to Global Site Tag ‘gtag.js’, way of write osCommerce eCommerce Tracking with gtag.js changes – So here below Updated E-commerce Tracking forGlobal Site Tag (gtag.js)!

osCommerce Track purchases with Global Site Tag (gtag.js) E-commerce Tracking

Google Analytic E-commerce tracking in osCommerce

Google Analytic eCommerce Tracking with osCommerc (gtag.js)

To track a  Google Analytic osCommerce transaction, send a purchase event with the items in the transaction

<script>
gtag('event', 'purchase', {
  "transaction_id": "Order Number or Id ",
  "affiliation": "Store Name",
  "value": Total Amount,
  "currency": "USD",
  "tax": tax,
  "shipping": shipping,
  "items": [
    {
      "id": "Product SKU",
      "name": "Product Name",
      "category": "Product Category",
      "quantity": No of quantity,
      "price": 'Product Price'
    }]
});
</script>

First Install Google Analytic (Global Site Tag (gtag.js) on osCommerce on <HEAD> Tag

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X”></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘UA-XXXXXX-X’);
</script>

Written above code sample E-commerce tracking then you need to modify with Custom PHP that will work on E-commerce tracking for osCommerce

You need modify given above given code you can see it need modify like that~

<script>
gtag(‘event’, ‘purchase’, {
  “transaction_id”: “<?php echo $order[‘order’]; ?>’”,
  “affiliation”: “test”,
  “value”: <?php echo format_raw($totals[‘value’], DEFAULT_CURRENCY); ?>,

Now it’s time to verify result in Google Analytic 

osCommerce eCommerce Tracking

Warning:if you do n’t know about javascript/ Datalayer/Jquery or do n’t have developing knowledge then do n’t try osCommerce Google Analytic/Google Tag Manager Ecommerce Tracking without touching Codea custom javascript without using Any plugin that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

Criteo OneTag Tags and Feed Integration on BigCommerce

Standard

Recently I have implemented Criteo OneTag implemented on Bigcommerce and other CMS directly putting code on the website or Using Google Tag Manager! 

Once I have looked Criteo OneTag and found most Tags are working based on Product Array based Pixel for Criteo OneTag, First you need to understand, How to work Criteo OneTag on the website and what is requirement and know to implemented Criteo Tag on Bigcommerce or Any CMS!

Types of Criteo OneTag Need to be Implement on the Website

  • Homepage
  • Listing
  • Product
  • Basket
  • Sales confirmation

First Setup Criteo OneTag Basic Tags and Feed Integration on BigCommerce also using Google Tag Manager

BigCommerce —–> Homepage Template ——> default.html

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
         { event: "setAccount", account: XXXXXXXX },
         { event: "setSiteType", type: "m FOR MOBILE OR t FOR TABLET OR d FOR DESKTOP" },
         { event: "setEmail", email: "TRIMMED AND LOWERCASE USER EMAIL ADDRESS" },         
         { event: "viewHome"}
 ); 
</script>

type: “m FOR MOBILE OR t FOR TABLET OR d FOR DESKTOP”

To Identify Device: Either you can put this code on the website or you can write your own custom javascript to identify Device Type like Mobile, Tablet and Desktop

Email Email address of the user

Note: Make you will replace Criteo OneTag Tracking Code with your Account:  XXXXX

2. Implement on Product Page  using Criteo OneTag Integration Direclty on BigCommerce also using Google Tag Manager

For Google Tag Manager using DataLayer Criteo Setup 

<script type=”text/javascript”>
dataLayer = dataLayer || [];
dataLayer.push({
pageType : ‘ProductPage’,
’email’: ‘Put Variable here’,
ProductID : ‘Put Variable here ‘,
});
</script>

Criteo OneTag Integration BigCommerce

3. Implement on Home Page  using Criteo OneTag Integration Direclty on BigCommerce also using Google Tag Manager

For Google Tag Manager using DataLayer Criteo Setup on Home Page

<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
'PageType':'HomePage',
'email': 'email address of the user'
});
</script>
Criteo OneTag on BigCommerce

Google Tag Manager Criteo Setup on Home Page

4. Implement on Listing Page using Criteo OneTag Integration Direclty on BigCommerce also using Google Tag Manager
For Google Tag Manager using DataLayer Criteo Setup for Listing Page

<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
'PageType':'ListingPage',
'email': 'email address of the user',
'ProductIDList' : ['ProductID_1', 'ProductID_2', 'ProductID_3']
});
</script>
Criteo OneTag Integration on BigCommerce

Google Tag Manager Criteo Setup for Listing Page

5. Implement on Basket Page using Criteo OneTag Integration Direclty on BigCommerce also using Google Tag Manager
For Google Tag Manager using DataLayer Criteo Setup for Basket

<script type="text/javascript">
var product_list = [];
product_list.push(
 { id: "productID_1", price: price_1, quantity: quantity_1 },
 { id: "productID_2", price: price_2, quantity: quantity_2 }
 /* add a line for each item in the user's cart */
);
var dataLayer = dataLayer || [];
dataLayer.push({
'PageType': 'BasketPage', 
'email': 'email address of the user',
'ProductBasketProducts': product_list
});
</script>
Google Tag Manager DataLayer Criteo Setup for Basket

Google Tag Manager using DataLayer Criteo Setup for Basket

5. Implement on Sales confirmation Page using Criteo OneTag Integration Direclty on BigCommerce also using Google Tag Manager

For Google Tag Manager using DataLayer Criteo Setup for Sales confirmation Page

<script type="text/javascript">
var product_list = [];
product_list.push(
 { id: "productID_1", price: price_1, quantity: quantity_1 },
 { id: "productID_2", price: price_2, quantity: quantity_2 }
 /* add a line for each item in the user's cart */
);
var dataLayer = dataLayer || [];
dataLayer.push({
'PageType': 'TransactionPage', 
'email': 'email address of the user',
'ProductTransactionProducts': product_list,
'TransactionID': 'TransactionID'
});
</script>
DataLayer Criteo Setup for Sales confirmation Page

Google Tag Manager Criteo Setup for Sales confirmation Page

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to Criteo OneTag Tags and Feed Integration on BigCommerce using Google Tag Manager a custom javascript without using Any plugin that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com