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