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

Standard

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)

 

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. Implementon 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 ‘,
content_type : ‘product’,
content_ids : ‘Put Variable here ‘,
value :Put Variable here ,
currency : ‘USD’
});
</script>

 

 

 

E-Commerce Tracking for Adobe Business Catalyst

Standard

Recently so many clients ask me to implement “E-Commerce Tracking for Adobe Business Catalyst” using Google Analytic and Google Tag Manager. Clients ask me a few questions before implementing, they said, they read on some blog and article, They said product details not possible on Adobe Business Catalyst and even said on official plugin also written on, I said do not worry, Already implement so many clients for E-Commerce Tracking for Adobe Business Catalyst include all the details of the product.

Full Product Detail with E-Commerce Tracking for Adobe Business Catalyst using Google Analytic/Google Tag Manager

Most of people does not want to try their Hand or modify tracking work with full details of E-commerce Tracking for Adobe Business Catalyst. I have modified tracking to work for Full E-commerce tracking with Product Details 

E-Commerce Tracking for Adobe Business Catalyst


1. Put this Code on the Website on after Opening <head> with Cross Domain tracking!

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXX-Y', 'auto', {'allowLinker': true});
    ga('require', 'linker');
    ga('linker:autoLink', ['worldsecuresystems.com', 'yoursitename.com'],false,true);
    ga('send', 'pageview');
</script>

Note:  Make sure you will change it with your Google Analytic UA ID ‘UA-XXXX-Y’

2. To Set Up e-commerce tracking on Adobe Business Catalyst, You need to put code on Success page, it’s call on Adobe Business Catalyst to Receipt – Buy

Site Manager —–> Module Templates ——–> Online Shop Layouts ————> Receipt ———–>Buy

————————————-Need to modify below to code to get proper details of e-commerce tracking with Product Details ———- 

‘id’: “{{ prod.productId }}”, // Transaction ID. Required

  ‘name’: “{{ prod.product.name }}”, // Product name. Required

  ‘sku’: “{{ prod.product.productCode }}”, // SKU/code

  ‘category’: “{{ catalog.name }}”, // Category or variation

  ‘price’: “{{ prod.totalPrice }}”, // Unit price

  ‘quantity’: ‘{{ prod.units }}’ // Quantity

});        

Now it’s time to verify E-commerce Tracking for Adobe business Catalyst  using Google Tag Manager and Google Analytic 

Ecommerce Tracking with Google Analytics

Warning: If you do n’t know about javascript or don’t have developing knowledge then do n’t try to implement on E-Commerce Tracking for Adobe Business Catalyst using Google Tag Manager / Google Analytic that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

Pardot Form Submission using Google Tag Manager

Standard

Recently one client asks to implement form using google tag manager for Pardot B2B marketing automation by Salesforce. First, you need to understand, How to form submission working with Pardot Form either you can redirect third party URL or Display Success Message on Pardot Form Submission. Pardot form is a difficult to track in Google Analytic because an iframe so first you need to understand and think about , How you will put code on the Pardot Form and or write a custom Javascript 

  1. Pardot Form embedded on the website with an Iframe 
  2. Pardot Form showing alway referral or Direct traffic  but solving this issue you need write a custom so that you can identify original source form submission 

IFrame Pardot Form Submission Tracking with Google Tag Manager

  1. Ignore Referral as Paradot  
  2. Show Correct Source of Traffic 
  3. Implement Form Decor to track correct origin source of traffic

First Install Google Tag Manager on Pardot iFrame Form template header and Body  

Paste this code as high in the <head> of the page as possible:
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXX’);</script>
<!– End Google Tag Manager –>
Additionally, paste this code immediately after the opening <body> tag:
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>

Note: Make you will replace GTM Tracking Code with your GTM ID XXXXX

 

Pardot iFrame Form Tracking

Tracking Pardot Forms in Google Analytics

2. Implemented Form Decor and Cross Domain Tracking Implemented to see correct form submission as correct source of traffic in Google Analytic for salesforce pardot Form and Conversion tracking

3. If you are not redirect from Pardot Form to third Party URL, When Form Submission it will show message after Submitting Pardot Form below See the screenshot.

When showing success message show then need to write a custom javascript to track those form submission Tracking pardot forms in google analytics using Google Tag Manager

Pardot Form Tracking as Event Tracking using Google Tag Manager

Warning: If you do n’t know about javascript or do n’t have developing knowledge then do n’t try to Pardot Forms Tracking using Google Tag Manager that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

I am avaible for Hire on Freelancer: Freelancer.com

I am avaible for Hire on Upwork: Upwork.com

I am avaible for Hire on Peopleperhour: Peopleperhour.com

I am avaible for Hire on Guru: Guru.com

AdWords Dynamic Remarketing Tags in BigCommerce for Stencil Themes

Standard

Setting up AdWords Dynamic Remarketing Tags in BigCommerce for Stencil Themes 

Recently once of client ask to set up Adword Dynamic Remarketing in BigCommerce for Stencil themes with Updated Event snippet for dynamic remarketing page with Custom Parameters.

Recently Google Adword Updated Dynamic Remarketing tag with Global Tag with Dynamic Remarketing event snippets with Custom parameters for all the pages of your website.

Setting Up Dynamic Remarketing Tags for Stencil Themes

What is Adwords Dynamic Remarketing?

To show ads to people visit your website previously using custom parameters for Dynamic Remarketing show ads. and remind visitor they have already visited your website with help of remarketing tags.

Step 1 Insert your custom tag to all your web pages, right before the closing </body> tag.

Put Code on /manage/storefront-manager/scripts

<!-- Global Site Tag (gtag.js) - Google AdWords: xxxxxxxxx -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-xxxxxxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());

  gtag('config', 'AW-123456789');
</script>
<!-- Event snippet for Example dynamic remarketing page -->
<script>
gtag('event', 'page_view', {'send_to': 'AW-123456789',
'ecomm_prodid': 'REPLACE_WITH_STRING_VALUE',
'ecomm_pagetype': 'REPLACE_WITH_STRING_VALUE',
'ecomm_totalvalue': 'REPLACE_WITH_STRING_VALUE'
});
</script>

Note: Make Sure you will replace Dynamic Remarketing Tracking Code with your Dynamic Remarketing Pixel AW- XXXXXXXX

Step 2 – Home Page – Setup Dynamic Remarketing Pixel in Bigcommerce for Stencil Themes

Dynamic Remarketing Tags for Stencil Theme

BigCommerce Google Adwords Dynamic Remarketing Setup for Stencil

Step 3 – Product Page – Setup  Adword Dynamic Remarketing Pixel Tags in Bigcommerce for Stencil Theme

Dynamic Remarketing Tags in BigCommerce for Stencil

Set Up Dynamic Remarketing Tags for Product Page in BigCommerce – Stencil Themes

Step 4 – Cart Page – Setting Up on Cart Page Adword Dynamic Remarketing Pixel Tags in Bigcommerce for Stencil Theme.

For Getting Product Id You need to write a Product Array in Bigcommerce Stencil themes, without Product Array does not work Dynamic Remarketing Pixel.

Dynamic Remarketing Tags in BigCommerce for Stencil

Set Up Dynamic Remarketing Tags for Cart Pages in BigCommerce – Stencil Themes

Step 5 – Purchase – Setting Up on Purchase Adword Dynamic Remarketing Pixel Tags in Bigcommerce for Stencil Theme.

Google Adwords Remarketing Tag Stencil Theme

BigCommerce Google Adwords Dynamic Remarketing Setup for Theme

Warning: If you do n’t know about javascript or do n’t have developing knowledge then do n’t try to AdWords Dynamic Remarketing Tags in BigCommerce for Stencil Themes that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

Setup Facebook Pixel Tracking With Clickfunnels using Google Tag Manager

Standard

 Set up Facebook Purchase Conversion Pixel on ClickFunnels using Google Tag Manager

Recently once client asked Setup Facebook Purchased Pixel Value on ClickFunnels using Google Tag Manager, Because they want to see which Facebook ads converted into Sales, How many revenue generated from each ad on Facebook, If you are aware of ClickFunnels Process Like Upsell and bump Sell and other offers till complete purchased of Sales, each setup of sales you need to create a purchased pixel and set up the conversion pixel. Before apply Facebook Purchased pixel on ClickFunnels make a test order to understand processes of sales.

What is require to set up Facebook Purchase Pixel Setup on Clickfunnels using Google Tag Manager

Setup Facebook Pixel Tracking With ClickFunnels

Set up The New Facebook Pixel In Clickfunnels

Already written below link How to get total revenue using Google Tag Manager on ClickFunnels

ClickFunnels Ecommerce Tracking using Google Tag Manager

First Install Google Tag Manager to Facebook Purchase Conversion Pixel on ClickFunnels using Google Tag Manager

Paste this code as high in the <head> of the page as possible:
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXX’);</script>
<!– End Google Tag Manager –>
Additionally, paste this code immediately after the opening <body> tag:
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>

Note: Make you will replace GTM Tracking Code with your GTM ID XXXXX

Setup Facebook Purchased Pixel on Google Tag Manager with Custom included all the variable like total revenue, Product Category and Product Name  and Setup Trigger on where is completed conversion

Facebook Conversion Pixel On Clickfunnels

Facebook Pixel Tracking With Custom HTML in ClickFunnels using Google Tag Manager

Warning: If you do n’t know about javascript or do n’t have developing knowledge then do n’t try to Setup Facebook Pixel Tracking With Clickfunnels using Google Tag Manager that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

ClickFunnels Adword Conversion Tracking using Google Tag Manager

Standard

Track adwords Conversions Tracking with Clickfunnels using Google Tag Manager

Recently, one of client asks me to track Dynamic Adword conversion with ClickFunnels using Google Tag Manager. Already written a previous post , How to track E-commerce tracking in ClickFunnels using Google Tag Manager (http://googletagmanagersolution.com/click-funnel-ecommerce-tracking-using-google-tag-manager/) same concept is going to apply to track ClickFunnels Dynamic Adword Conversion Tracking using Google Tag Manager.

When you will start working on Adword conversion tracking for ClickFunnels make sure you will All the UpSell and Apply adword conversion when Upsell finish or does not go to UpSell. And Make sure you will make a test sale before start implement adword conversion tracking on ClickFunnels using Google Tag Manager.

Integrate ClickFunnels with Google Adword Conversion Tracking using Google Tag Manager

First Install Google Tag Manager to Track adwords Conversions Tracking with Clickfunnels

Paste this code as high in the <head> of the page as possible:
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXX’);</script>
<!– End Google Tag Manager –>
Additionally, paste this code immediately after the opening <body> tag:
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>

Note: Make you will replace GTM Tracking Code with your GTM ID XXXXX

For Dynamic Adwords Conversions Tracking with Clickfunnels using Google Tag Manager used Custom Javascript 

  1. Ge Total Revenue Value of UpSell and other Revenue tracking using Google Tag Manager on ClickFunnels

    clickfunnels conversion tracking

    ClickFunnels Dynamic Adword Conversion Tracking using Google Tag Manager

Now it’s time to verify Adword Conversion Tracking for ClickFunnels using Google Tag Manager

ClickFunnels Adwords Conversion Tracking Tag Manager

Adword Conversion Tracking ClickFunnels using Google Tag Manager

Warning: If you do n’t know about javascript or do n’t have developing knowledge then do n’t try to implement on ClickFunnels Adword Conversion Tracking using Google Tag Manager that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

Bigcommerce Google Tag Manager Ecommerce Tracking without touching Code

Standard

Google Tag Manager for BigCommerce Ecommerce/E-commerce Tracking without Touching Code

Recently one client asked me to track e-commerce tracking on BigCommerce on Stencil Themes using Google Tag Manager with Custom Javascript without Touching code of the big commerce. I asked to the client why you don’t want to put data layer, He said website is fully customized and also don’t want to share access of admin anybody, asked to client I need to make test order on the website, once I make a test order then see possible with custom javascript on BigCommerce (Stencil Themes).

What Challenges for E-commerce Tracking on BigCommerce (Stencil Themes) without Touching Code/ Data Layer on the website

  1. Product Array – one of that challenging to get product array on on BigCommerce (Stencil Themes).
  2. Write a Custom Javascript to Get Your order number
  3. Write a  Custom Javascript to get Total order value
  4. Write a Custom Javascript to Tax and Shipping value

First Install Google Tag Manager on Bigcommerce Google Tag Manager Ecommerce Tracking without touching Code

Paste this code as high in the <head> of the page as possible:
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXX’);</script>
<!– End Google Tag Manager –>
Additionally, paste this code immediately after the opening <body> tag:
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>

Note: Make you will replace GTM Tracking Code with your GTM ID XXXXX

Written Javascript to get the value of product Array, total order value, Shipping value , Tax value and Order number on BigCommerce (Stencil Themes) without Touching Code/ Data Layer on the website for E-commerce/eCommerce Tracking 

Ecommerce with Google Analytics at BigCommerce

Product Array For Ecommerce Tracking using Custom Javascript on BigCommerce

google tag manager bigcommerce stencil E-commerce Tracking

Custom Javascript to Get value of E-commerce Tracking on BigCommerce Ecommerce/E-commerce Tracking without Touching Code

Written Custom E-commerce Tracking Code using Help of Custom HTML on Google Tag Manager For BigCommerce (Stencil Themes) without Touching Code/ Data Layer on the website for E-commerce/eCommerce Tracking 

Bigcommerce Google Tag Manager Ecommerce Tracking

BigCommerce ecommerce tracking with Google Tag Manager

Warning:if you do n’t know about javascript/ Datalayer/Jquery or do n’t have developing knowledge then do n’t try Bigcommerce 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