Facebook Conversion Pixel on Bigcommerce Using Google Tag Manager

Standard

Bigcommerce Facebook Conversion Pixel Implement using Google Tag Manager without touching Code on BigCommerce (with Stencil themes or Any theme of BigCommerce) 

Recently once client ask me to Facebook Standard Events pixel include ViewContent, AddtoCart, AddToWishlist, InitiateCheckout, AddPaymentInfo and Purchase Pixel etc.

To Work Advance Facebook Pixel on Bigcommerce using Google Tag Manager 

  content_name: 'Require a Product Name ',
  content_category: 'Require a Product Category',
  content_ids: ['1234'] Require a Product id that must be match with product,
  content_type: 'product',
  value: 0.50, Require a Product revenue ,
  currency: 'USD'

content_name: Require product Name get using Google Tag Manager using a custom javascript/Data Layer
content_category: Require Product Category geting using Google Tag Manager using a Custom Javascript /Data Layer
content_ids:One of toughest job getting product id using google tag manager using a custom, Probably more easier to using Data Layer , 
value: Product amount and Total order value using Google Tag Manager using a custom javascript/Data layer 

1. First Set up Facebook Basic Pixel on Bigcommerce  using 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(‘init’, ‘xxxxxxxxxxxxxxxxx’); // Insert your pixel ID here.
fbq(‘track’, ‘PageView’);
</script>
<noscript><img height=”1″ width=”1″ style=”display:none”
src=”https://www.facebook.com/tr?id=xxxxxxxxxxxxxxxxx&ev=PageView&noscript=1″
/></noscript>
<!– DO NOT MODIFY –>
<!– End Facebook Pixel Code –>

Facebook Pixel on Bigcommerce

Install The Facebook Pixel In Your Bigcommerce

Note: Make you will replace Facebook Pixel Id with your Facebook Pixel ID XXXXX

2. Write a custom Javascript to get all the value above described for Bigcommerce to work Facebook Pixel

Bigcommerce Facebook Dynamic Product Ads

Add dynamic conversion value, Product id , Product Name, Product Category with BigCommerce

3.ViewContent – Need to verify to facebook viewContent Pixel with facebook helper and implement through Google Tag Manager

ViewContent big commerce facebook pixel

ViewContent Facebook Pixel in Bigcommerce

4. AddToCart – When a product is added to click on add to cart button using Google Tag Manager on Bigcommerce Facebook Pixel

AddToCart facebook pixel bigcommerce

AddToCart facebook pixel bigcommerce

4. Purchase – When a Purchased completed on Bigcommerce Facebook Pixel using Google Tag Manager

Bigcommerce Facebook Conversion Tracking

Facebook Conversion Tracking on Bigcommerce

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

Bigcommerce Dynamic Adwords Conversion Tracking using Google Tag Manager

Standard

Dynamic Adwords conversion Tracking in BigCommerce using Google Tag Manager

Recently, one of my clients asks me to implement dynamic adword conversion tracking using Google Tag Manager include an order id with Dynamic total revenue using Javascript to avoid duplicate adword Transaction.

Once I looked his website and found there was an error in Google Tag Manager code that was not placed on the right place, quite difficult to place right place because, these errors found in the most BigCommerce product Pages and Home Pages.

  1. GTM JavaScript code not found as a direct child of the <head> tag
  2. GTM no-script code not found: either missing or not in <body>

To Work Google Tag Manager in BigCommerce without any Error I modified tracking theme code of BigCommerce (Stencil)

BigCommerce Google Adwords Conversion Tracking

BigCommerce Google Adwords Conversion Tracking using Google Tag Manager

  1. First Install Google Tag Manager on Your Bigcommerce for BigCommerce Google Adwords Dynamic Conversion 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

2. Written a Custom Javascript to get order id and Total Order value using Google Tag Manager for Adword Dynamic conversion for Bigcommerce

3.  Now it’s time to verify Dynamic Adwords conversion Tracking in BigCommerce through Google Tag Manager with help of Google Tag Assistant 

Adwords Conversion Tracking Tag Manager

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to Google Analytic Dynamic Adwords conversion Tracking in 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

Implementing Product Schema Markup & Structured Data SEO For Ecommerce Product Pages

Standard

Implementing Product Schema Markup For Ecommerce Product Pages using Google Tag Manager

Recently once client ask me to implement schema on e-commerce website and other local website using Google Tag Manager, once I look his website I said it’s possible to implement schema using Google Tag Manager with with JSON-LD. For Tracking product page schema need to apply some custom javascript or Data layer to Getting like Product price and Stock in or Stock out.

First you need to generate Product schema code using schema.org some other website to generate product schema with JSON-LD.

<div itemscope itemtype=”http://schema.org/Product”>
    <h1 itemprop=”name”>Prodcut Name</h1>
    <img src=”-product.png” alt=”Prodcut Alt Tag” itemprop=”image” />
    <p itemprop=”description”>
        This is a really amazing product. In fact, we think you will be amazed.
        <span itemprop=”sku”>123456789</span>
    </p>
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        <span itemprop=”ratingValue”>4</span> stars, based on 
        <span itemprop=”reviewCount”>1,987</span> reviews.
    </div>
    <div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>
        <meta itemprop=”priceCurrency” content=”USD” />
        $<span itemprop=”price”>For Product Price need to write custom javascript</span> |
        <span itemprop=”availability”>In-stock</span>
    </div>
</div>