Bigcommerce Enhanced Ecommerce Tracking using Google Tag Manager

Standard

BigCommerce Enhanced Ecommerce Tracking using Google Tag Manager without using Any plugin or without any data layer code on the BigCommerce used only Custom Javascript

Recently I received a project from client, they asked me to implement E-commerce / Enhanced Ecommerce tracking using Google Tag Manager, when I asked to access of Bigcommerce, client said not because his website if fully customized, they don’t want touch my hand on his website. Client said he is using google tag manager then I said I can implement an enhanced Ecommerce Tracking using Google Tag Manager.

To Implement Enhanced Ecommerce Tracking on BigCommerce using Custom Javascript

BigCommerce Enhanced Ecommerce Tracking

Implement Enhanced Ecommerce Tracking on BigCommerce using Google Tag Manager

First Install Google Tag Manager on Your Bigcommerce for Set Up E-commerce Tracking 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

  1. Product Detail Impressions: To Track product impression for BigCommerce Enhanced Ecommerce Tracking using Google Tag Manager used custom javascript to get the value of price, product and brand etc
Measuring Product Impressions Enhanced Ecommerce

Measuring Product Impressions Enhanced Ecommerce

Product Impressions Enhanced Ecommerce output of Bigcommerce

2.  Add to Cart: To measure additions add to Cart Product added for BigCommerce Enhanced Ecommerce Tracking using Google Tag Manager used custom javascript to get the value of price, product and brand etc

shopping cart by using an add Enhanced Ecommerce Tracking on BigCommerce

Shopping Cart Enhanced Ecommerce of Bigcommerce

Adding a Product to a Shopping Cart Enhanced Ecommerce output of Bigcommerce

3.  Measuring Checkout Steps: To measure Checkout Steps that will tell us , How many people reach to till checkout and drop out and went till another step for Enhanced Ecommerce tracking in BigCommerce

Measuring Checkout Steps Enhanced Ecommerce BigCommerce

Checkout Ecommerce Measurement

Checkout Ecommerce Measurement

4.  Measuring Purchases: To track purchases details in Google Analytic using Custom Javascript and Micros

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to Bigcommerce Enhanced Ecommerce Tracking 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

ClickFunnels Ecommerce Tracking using Google Tag Manager

Standard

Real-Time ClickFunnels Ecommerce(E-Commerce) Tracking and Reporting in Google Analytic Using Google Tag Manager

Recently once client ask me to set up E-commerce tracking on Click Funnel using Google Tag Manager/Google Analytic so that , he can identify revenue generating which source/medium so that identify Data Profitability Analysis so that enhanced is marketing profitability tracking revenue with real time 100% ecommerce tracking using Google Tag Manager.

 

Benefits of Google Analytic E-Commerce Tracking using Google Tag Manager for ClickFunnels Ecommerce Tracking

Sales Data will avaible to your in Google Analytic E-commerce Tracking Reports includes using Google Tag Manager on Click Funnels Real-Time Ecommerce( E-Commerce ) Tracking

  • Conversion rate
  • Number of transactions
  • Total revenue
  • Average order value
  • Number of unique purchases
  • Quantity of products sold
  • Quantity of each product sold
  • Revenue by product
  • Average price of products

1. ClickFunnels Adword Conversion Tracking using Google Tag Manager

2. Setup Facebook Pixel Tracking With Clickfunnels using Google Tag Manager

See exactly from where the sales and traffics are coming through which source, medium, campaign, content and which keyword are generating sales and traffic.

Step 1First Install Google Tag Manager on Your Click Funnels for Setup E-commerce Tracking 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

Step 2. DataLayer written to get product name, Price, Total revenue and shipping details for to work Click Funnel eCommerce Tracking using Google Tag Manager

Click Funnels Ecommerce Tracking Using Google Tag Manager

Product Clickfunnels Ecommerce Tracking Using Google Tag Manager

Similar way to get other details to work Click Funnel Ecommerce Tracking

Step 3. Create a Custom html with custom Datalyer in Google Tag Manager to work Click Funnel eCommerce Tracking using Google Tag Manager

Click Funnel eCommerce - Purshase - DataLayer

Click Funnel eCommerce Purchase DataLayer

It’s time show result in Google Analytic for Click Funnels Ecommerce(E-Commerce) Tracking

 E-commerce Tracking for Click Funnels

E-commerce Tracking for Click Funnels

Final Result compared The E-commerce Data Layer values after this Message and E-commerce Order id verified in Google Analytic 

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to implement on Click Funnels Ecommerce 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

Pop up YouTube Video Tracking using Google Tag Manager

Standard

Recently, one of client asks me to track pop up/Popup a YouTube video with autoplay/without AutoPlay using Google Tag Manager, once I looked his website was built in WordPress and use one of the plugin (Responsive YouTube & Vimeo Video Lightbox Plugin for WordPress) to set up Pop YouTube Video. Once review the code of a website and found It seems you don’t have a query on your site and you are using it in a tag.

Here is Popup YouTube Video Tracking

Pop Up YoutUbe Video Tracking using Google Tag Manager

 

What is Challenge here

Write a custom javascript and custom html to get to work a Pop up youtube video using Google Tag Manager.  To get progres event tracking like Play, Pause, Watch to End, and view 10, 25, 50, 75, and 90% of the video in Google Analytic using Google Tag Manager.

Step 1. Create the YouTube is Present Macro with Pop up Video Tracking using Google Tag Manager 

Macro Name: YouTube is Present for Popup Video Tracking using Google Tag Manager
Macro Type: Custom Javascript
Custom Javascript: See below in Screen

Tracking Pop up YouTube Video Tracking

Tracking Pop up Video Tracking Presence using Google Tag Manager

Step 2. Track Pop up  Video Tracking using Google Tag Manager 

Tag Name: YouTube Listener to Pop up Video Tracking using Google Tag Manager
Tag Type: Custom HTML Tag

Popup Youtube Video Tracking

Step 3. Written again a custom html to fire on Popup click with data layer to message when pop video click Track Pop up  Video Tracking using Google Tag Manager 

PopUp Video Tracking

Firing Rules 

Rule Name: YouTube present
Conditions:
{Event name equals gtm.dom
{{YouTube is Present}} equals true

YouTube Video Tracking using Google Tag Manager

Pop up Light box YouTube Video Tracking using Google Tag Manager

Step 3. Create Macros for Event Action, Event Category, and Event Label Pop up Light box YouTube Video Tracking using Google Tag Manager

A: Event Action Macro using Popup YouTube Video Tracking using Google Tag Manager

Macro Name: dataLayer action
Macro Type: Data Layer Variable
Data Layer Variable Name: eventAction
Data Layer Version: Version 2
Default Value: (blank)

Pop up Light box YouTube Video Tracking

Popup YouTube Video Tracking using Google Tag Manager

B: Event Category Macro using Popup YouTube Video Tracking using Google Tag Manager

Macro Name: dataLayer category
Macro Type: Data Layer Variable
Data Layer Variable Name: eventCategory
Data Layer Version: Version 2
Default Value: (blank)

Pop up Light box YouTube Video

Popup YouTube Video Tracking using Google Tag Manager

C: Event Label Macro using Popup YouTube Video Tracking using Google Tag Manager

Macro Name: dataLayer label
Macro Type: Data Layer Variable
Data Layer Variable Name: eventLabel
Data Layer Version: Version 2
Default Value: (blank)

Light box YouTube Video Tracking using Google Tag Manager

Popup YouTube Video Tracking using Google Tag Manager

Step 4. Create UA Youtube Event – UA Tag & Check for YouTube Event Rule Pop up Light box YouTube Video Tracking using Google Tag Manager

Tag Name: UA YouTube Video Tracking – Video Page
Tag Type: Universal Analytics
Tracking ID: (your Google Analytics ID)
Track Type: Event
Event Tracking Parameters:
Category: {{dataLayer category}}
Action: {{dataLayer label}}
Label: {{dataLayer action}}

 YouTube Video Pop Tracking

Tag Setup for Pop up Light box YouTube Video Tracking using Google Tag Manager

Firing Rules

Rule Name: YouTube event

Fire On

Event name equals youtube

Custom Even Tracking for Youbube Video

It’s time show result in Google Analytic for Popup  Youtube Video Tracking 

Popup Youtueb Video Result in Google Analytic

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to implement on Popup YouTube Video 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

Magento Enhanced Ecommerce (UA) Tracking using Google Tag Manager without using Any plugin

Standard

Magento Enhanced Ecommerce (UA) Tracking using Google Tag Manager without using Any plugin or without any data layer code on the Magneto used only Custom Javascript

Recently once client asks to setup Magento Enhanced Ecommerce/Ecommerce Tracking (UA) Tracking using Google Tag Manager without any plugin or without putting a single code on the website , he scared because of customized theme. Once I have looked the website discussed which all possible using Custom Javscript using Google Tag Manager all the versions of Magento both edition community and enterprise.

Before tracking start project let me tell you what require to setup Enhanced Ecommerce/Ecommerce Tracking using Google Tag Manager for Magento.

Implement using a Custom JavaScript Macro using Google Tag Manager for Magento

Impression Data using Google Tag Manager

Impression Data using Google Tag Manager

Step 1. Measuring Product Impressions – To measure product impression to view a product to setup Magento Enhanced Ecommerce Tracking using Google Tag Manager without using Any plugin

Written a javascript to get the value of Name, SKU = ID, Price , Category and Brand

enhanced eCommerce Tracking

Setup Google Analytics Enhanced Ecommerce for Magento

Step 2. Measuring Additions – To measure add to cart from a shopping Cart to setup Magento Enhanced Ecommerce Tracking using Google Tag Manager without using Any plugin

Write a javascript to get the value of Name, SKU = ID, Price , Category and Brand

Magento Enhanced Ecommerce Tracking

Magento Google Tag Manager Enhanced Ecommerce

Step 3. Measuring a Checkout – To measure step of Checkout to setup Magento Enhanced Ecommerce Tracking using Google Tag Manager without using Any plugin


Step 4. Measuring a Purchases – To Measuring Purchases to setup Magento Enhanced Ecommerce Tracking using Google Tag Manager without using Any plugin

Google Analytics for Magento eCommerce Tracking

Implemented E-Commerce Tracking on Magento via 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 Magento Enhanced Ecommerce Tracking using Google Tag Manager 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

AdWords dynamic conversion values in Google Tag Manager

Standard

Recently once client asks me to setup google AdWords dynamic conversion values in Google Tag Manager before that he getting an error on Dynamic adword conversion tracking “Conversion Value should be prefixed with standard currency.”, “Conversion Value USD%20%2023“, conversion value not set“, “Double counting Adword Conversion Tracking”, “No HTTP response detected”, “Missing CDATA comments.” and “Non-standard implementation”

Here is two method Setup Dynamic Adword Conversion Tracking  either using Google Tag Manager or Directly Place a Code on Success with Require Dynamic Order Value.

Require following parameters to Set up correct Dynamic adword Conversion using Google Tag Manager or Success Pages

    1. Conversion ID  In the code box, the number after “var google_conversion_id = ” is the Conversion ID, and the number after “var google_conversion_label = ” is the Conversion Label
    2. Conversion Label – In the code box, the number after “var google_conversion_id = ” is the Conversion ID, and the number after “var google_conversion_label = ” is the Conversion Label.
    3. Conversion Value Total transaction value for every order “integrate transaction-specific”
    4. Order ID – Passing a dynamic order ID helps to avoid counting duplicate conversions.  If there are two conversions for the same conversion action with the same order ID, AdWords will know the second conversion is a duplicate, and it won’t be counted. The order ID must be unique for each order. The order IDs must not include any information that could be used to identify individual customers. It can include numbers, letters, and special characters like dashes or spaces, with a character limit of 64 characters.

Before actually set up dynamic adword conversion Tracking , you require to changes in google adword

See below changes in Google Adword

Dynamic Adword Conversion Tracking

Conversion ValueGetting a  Total Order value for adword conversion tracking two way, either you can place a data layer on success page or you can use custom javascript 

How to adword dynamic conversion tracking code to PHP pages

<!-- Google Code for Purchase Conversion Page -->
	<script type="text/javascript">
	/* <![CDATA[ */
	var google_conversion_id = 1234567890;
	var google_conversion_language = "en";
	var google_conversion_format = "1";
	var google_conversion_color = "666666";
	var google_conversion_label = "xxxxXXx1xXXX123X1xX";
	if (<? echo $totalValue ?>) {
		var google_conversion_value = <? echo $totalValue ?>;
		var google_conversion_currency = <? echo $currency ?>;
	}
	var google_conversion_currency = "USD";
        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/1234567890/?value=
	<?echo $totalValue ?>&amp;currency_code=<? echo $currency ?>
	&amp;label=xxxxXXx1xXXX123X1xX&amp;guid=ON&amp;script=0">
        </div>
	</noscript>
	</body>

or Using Custom Javascript like

function(){

var total order = document.querySelector(“condition here”).innerText.match(/^.{1}(.*).{0}/i)[1].trim();

return total order;

}

Total Order Value for Dynamic Adword Conversion Tracking

Using Custom Javascript get total value of order for dynamic adwrod conversion tracking

Now it’s time check a result on the website using Google Tag Assistant 

 

Dynamic Adword Conversion Tracking

If you have an issue on adword conversion/Dynamic Adword Conversion tracking counting Double or duplicate in WordPress , Woocomerce, Magento, Shopify , Drupal, wix, Weebly , Joomla  etc any type of custom Cms.

For Contact: mappchero@gmail.com

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to implement Dynamic Adword Conversion tracking using Google Tag Manager without, it may be stop form submission  

Disclaimer: Google tag manager belongs to Google property 

Advance Facebook Pixel Setup for Woocommerce without Plugin using Google Tag Manager

Standard

 To Implement Advance Facebook Pixel Setup Woocommerce using Google Tag Manager without Any Plugins

Recently once client asked me to set up Advance Faebook Pixel using Google Tag Manager in Woocommerce without putting Code on the website and he said website is fully customized but not update with Woocommerce version and not even use any plugin on the website. Then I have decided to implement through Google Tag Manager.

What is challenge here to set up entire advance facebook pixel using Google Tag Manager 

  1. ViewContent :  To implement ‘ViewContent’  (viewed such as a product page)  Require to value, currency, content_name, content_type, content_ids

Here is difficult Part is How to getcontent_ids’ I have decided to write a javascript to get product so that will work . After making couple hours testing to get product finally get its product using google tag manager that’s actually working.

Woocommerce Product id using Google Tag Manager

Woocommerce Product id using Google Tag Manager

content_name:  Now it’s time product name using Google Tag Manager and obviously using custom javascript and Jquery, it’s quite easy to get product name easily using custom javascript 

Woocommerce Product for Facebook pixel

Product Nage for Advance Facebook pixel

Value:  Actually ‘value’ means product price without including revenue, symbol, To get product does not take much time getting the product price without revenue.

Using Custom Javascript To Product Price Woocommerce

Get Product Price in Woocommerce using Google Tag Manager

content_type: For this ‘content_type’ actually does not require any javascript, just simply write “content_type: ‘product’ “only that must be fire on product Pages

Finally got all the value now ready to implement on website let see result on Woocommerce for Advance Facebook Pixel.

Step 1.1 First Require to Setup Basic Facebook pixel on all the pages on Woocommerce with help of Google Tag Manaager

The pixel base code tracks activity on your website, providing a baseline for measuring specific events.
Copy the base code below and paste it between the header tags on every page of your website:
<!– Facebook Pixel Code –>
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,’script’,
 
fbq(‘init’, ‘xxxxxxxxxxxxxx’);
fbq(‘track’, ‘PageView’);
</script>
<noscript>
<img height=”1″ width=”1″
&noscript=1″/>
</noscript>
<!– End Facebook Pixel Code –>

Note:  Make sure you will replace ‘xxxxxxxxxxxxxx’ with actually facebook conversion id 

Step 1.2 ViewContent : Now it’s time to Set up ‘ViewContent’ pixel on the website on Woocommerce with help of Google Tag Manager.

<!– Facebook Pixel Code –>
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version=’2.0′;n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,’script’,’https://connect.facebook.net/en_US/fbevents.js’);
fbq(‘track’, ‘ViewContent’, {
content_ids: ‘{{Product ID}}’,
content_name: ‘{{Product Name}}’,
content_type: ‘product’,
value: ‘{{Product Price}}’,
currency: ‘EUR’
});
</script>
<noscript><img height=”1″ width=”1″ style=”display:none”
src=”https://www.facebook.com/tr?id=xxxxxxxxx&ev=ViewContent&cd[content_ids]='{{Product ID}}’&cd[content_name]='{{Product Name}}’&cd[value]='{{Product Price}}’&cd[currency]=’EUR’&noscript=1&noscript=1″
/></noscript>
<!– DO NOT MODIFY –>
<!– End Facebook Pixel Code –>

Now Configure Trigger, Tag and Event Triggers in Google Tag Manager in Woocommerce For Facebook Advance Pixel

Facebook pixel ViewContent Woocommerce

ViewContent Woocommerce Facebook Pixel using Google Tag Manager

 Now it’s time verify result using Facebook Pixel Helper.

2. AddToCart:  To implement ‘AddToCart’ (Product adding to shopping cart) Require to value, currency, content_name, content_type, content_ids, all the value already get above

<!– Facebook Pixel Code –>
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version=’2.0′;n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,’script’,’https://connect.facebook.net/en_US/fbevents.js’);
fbq(‘track’, ‘Add to cart’, {
content_ids: ‘{{Product ID}}’,
content_name: ‘{{Product Name}}’,
content_type: ‘product’,
value: ‘{{Product Price}}’,
currency: ‘EUR’
});
</script>
<noscript><img height=”1″ width=”1″ style=”display:none”
src=”https://www.facebook.com/tr?id=xxxxxxxxx&ev=Add to cart&cd[content_ids]='{{Product ID}}’&cd[content_name]='{{Product Name}}’&cd[value]='{{Product Price}}’&cd[currency]=’EUR’&noscript=1&noscript=1″
/></noscript>
<!– DO NOT MODIFY –>
<!– End Facebook Pixel Code –>