Home / How to set up Conversion API Facebook Shopify using GTM

How to set up Conversion API Facebook Shopify using GTM

by

Setup Conversion API Facebook Shopify is necessary because 3rd party cookies will be retiring soon.

Setup Conversion API Facebook Shopify Complete Guide

Since the iOS 14 update, most Shopify stores have struggled to measure conversion as accurately as possible. It has become more challenging for a store to understand what campaigns, audiences, or creative ads drive results on Facebook.

Some are losing a lot of money on ads, some are struggling to return to the old ROAS, and some online stores aren’t doing as well as before.

You might have tried the Shopify Channel App, Get Elevar, AnyTrack, and other solutions to keep up with these new changes.

Some of these solutions might work but are too expensive, some don’t work well, or some don’t give you as much control as you want.

Don’t worry. It is not the end of the road.

We present you the setup Conversion API Facebook Shopify through GTM.

Why Use the Setup Conversion API Facebook Shopify through GTM?

  1. You can improve reporting by at least 20% on average.
  2. You can resist Adblockers.
  3. You can be more resistant to browsing tracking preventions.
  4. You make your data first-party instead of third-party.
  5. You can extend the cookie expiration time Safari and other browsers set to its original form.

All the above leads to better campaign optimization, return on ad spend, and more revenue.

What do you need to set up Conversion API Facebook Shopify using GTM?

  1. A Facebook Business Manager.
  2. A Facebook Pixel.
  3. A Google Tag Manager Web Account.
  4. A Google Tag Manager Server Account.
  5. A Google Analytics Account.
  6. A Stape.io Account.
  7. Shopify website.
  8. Access to your domain provider
  9. Some patience.

Here is an overview of the setup conversion API Facebook Shopify process:

  1. Set up the ecommerce data layer.
  2. Create your Facebook Pixel if you don’t have one.
  3. Verify your domain in your Facebook Business Manager.
  4. Get your GTM Web and Server Ready.
  5. Set up your Stape.io account.
  6. Set up GA4 tag for the web & server.
  7. Send user data to server GA4.
  8. Set up FB web tag.
  9. Send user data.
  10. Set up FB server tag and trigger.
  11. Setting up Facebook allows a list.
  12. Update cookie for FB and GA.
  13. Test.
  14. Publish.

Let’s start the Setup Conversion API Facebook Shopify using GTM.

Setting up data layers in Shopify, theme code

Ecommerce data layers:

If you need the begin checkout data layer, click here.

If you need the purchase data layer, click here.

<script>

if(!window.jQuery){
	var jqueryScript = document.createElement('script');
	jqueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js');
	document.head.appendChild(jqueryScript);
}

__DL__jQueryinterval = setInterval(function(){
	// wait for jQuery to load & run script after jQuery has loaded
	if(window.jQuery){
    	// search parameters
    	getURLParams = function(name, url){
        	if (!url) url = window.location.href;
        	name = name.replace(/[\[\]]/g, "\\$&");
        	var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        	results = regex.exec(url);
        	if (!results) return null;
        	if (!results[2]) return '';
        	return decodeURIComponent(results[2].replace(/\+/g, " "));
    	};
   	 
    	/**********************
    	* DYNAMIC DEPENDENCIES
    	***********************/
   	 
    	__DL__ = {
        	dynamicCart: true,  // if cart is dynamic (meaning no refresh on cart add) set to true
        	debug: false, // if true, console messages will be displayed
        	cart: null,
        	wishlist: null,
        	removeCart: null
    	};
   	 
    	customBindings = {
        	cartTriggers: [],
        	viewCart: [],
        	removeCartTrigger: [],
        	cartVisableSelector: [],
        	promoSubscriptionsSelectors: [],
        	promoSuccess: [],
        	ctaSelectors: [],
        	newsletterSelectors: [],
        	newsletterSuccess: [],
        	searchPage: [],
        	wishlistSelector: [],
        	removeWishlist: [],
        	wishlistPage: [],
        	searchTermQuery: [getURLParams('q')], // replace var with correct query
    	};
   	 
    	/* DO NOT EDIT */
    	defaultBindings = {
        	cartTriggers: ['form[action="/cart/add"] [type="submit"],.add-to-cart,.cart-btn'],
        	viewCart: ['form[action="/cart"],.my-cart,.trigger-cart,#mobileCart'],
        	removeCartTrigger: ['[href*="/cart/change"]'],
        	cartVisableSelector: ['.inlinecart.is-active,.inline-cart.is-active'],
        	promoSubscriptionsSelectors: [],
        	promoSuccess: [],
        	ctaSelectors: [],
        	newsletterSelectors: ['input.contact_email'],
        	newsletterSuccess: ['.success_message'],
        	searchPage: ['search'],
        	wishlistSelector: [],
        	removeWishlist: [],
        	wishlistPage: []
    	};
   	 
    	// stitch bindings
    	objectArray = customBindings;
    	outputObject = __DL__;
   	 
    	applyBindings = function(objectArray, outputObject){
        	for (var x in objectArray) {  
            	var key = x;
            	var objs = objectArray[x];
            	values = [];    
            	if(objs.length > 0){    
                	values.push(objs);
                	if(key in outputObject){         	 
                    	values.push(outputObject[key]);
                    	outputObject[key] = values.join(", ");
                	}else{   	 
                    	outputObject[key] = values.join(", ");
                	}   
            	}  
        	}
    	};
   	 
    	applyBindings(customBindings, __DL__);
    	applyBindings(defaultBindings, __DL__);
   	 
    	/**********************
    	* PREREQUISITE LIBRARIES
    	***********************/
   	 
    	clearInterval(__DL__jQueryinterval);
   	 
    	// jquery-cookies.js
    	if(typeof $.cookie!==undefined){
        	(function(a){if(typeof define==='function'&&define.amd){define(['jquery'],a)}else if(typeof exports==='object'){module.exports=a(require('jquery'))}else{a(jQuery)}}(function($){var g=/\+/g;function encode(s){return h.raw?s:encodeURIComponent(s)}function decode(s){return h.raw?s:decodeURIComponent(s)}function stringifyCookieValue(a){return encode(h.json?JSON.stringify(a):String(a))}function parseCookieValue(s){if(s.indexOf('"')===0){s=s.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,'\\')}try{s=decodeURIComponent(s.replace(g,' '));return h.json?JSON.parse(s):s}catch(e){}}function read(s,a){var b=h.raw?s:parseCookieValue(s);return $.isFunction(a)?a(b):b}var h=$.cookie=function(a,b,c){if(arguments.length>1&&!$.isFunction(b)){c=$.extend({},h.defaults,c);if(typeof c.expires==='number'){var d=c.expires,t=c.expires=new Date();t.setMilliseconds(t.getMilliseconds()+d*864e+5)}return(document.cookie=[encode(a),'=',stringifyCookieValue(b),c.expires?'; expires='+c.expires.toUTCString():'',c.path?'; path='+c.path:'',c.domain?'; domain='+c.domain:'',c.secure?'; secure':''].join(''))}var e=a?undefined:{},cookies=document.cookie?document.cookie.split('; '):[],i=0,l=cookies.length;for(;i<l;i++){var f=cookies[i].split('='),name=decode(f.shift()),cookie=f.join('=');if(a===name){e=read(cookie,b);break}if(!a&&(cookie=read(cookie))!==undefined){e[name]=cookie}}return e};h.defaults={};$.removeCookie=function(a,b){$.cookie(a,'',$.extend({},b,{expires:-1}));return!$.cookie(a)}}))}
   	 
    	/**********************
    	* Begin dataLayer Build
    	***********************/
   	 
    	window.dataLayer = window.dataLayer || [];  // init data layer if doesn't already exist

    	var template = "{{template}}";
   	 
    	/**
    	* Landing Page Cookie
    	* 1. Detect if user just landed on the site
    	* 2. Only fires if Page Title matches website */
   	 
    	$.cookie.raw = true;
    	if ($.cookie('landingPage') === undefined || $.cookie('landingPage').length === 0) {
        	var landingPage = true;
        	$.cookie('landingPage', unescape);
        	$.removeCookie('landingPage', {path: '/'});
        	$.cookie('landingPage', 'landed', {path: '/'});
    	} else {
        	var landingPage = false;
        	$.cookie('landingPage', unescape);
        	$.removeCookie('landingPage', {path: '/'});
        	$.cookie('landingPage', 'refresh', {path: '/'});
    	}
    	if (__DL__.debug) {
        	console.log('Landing Page: ' + landingPage);
    	}
   	 
    	/**
    	* Log State Cookie */
   	 
    	{% if customer %}
    	var isLoggedIn = true;
    	{% else %}
    	var isLoggedIn = false;
    	{% endif %}
    	if (!isLoggedIn) {
        	$.cookie('logState', unescape);
        	$.removeCookie('logState', {path: '/'});
        	$.cookie('logState', 'loggedOut', {path: '/'});
    	} else {
        	if ($.cookie('logState') === 'loggedOut' || $.cookie('logState') === undefined) {
            	$.cookie('logState', unescape);
            	$.removeCookie('logState', {path: '/'});
            	$.cookie('logState', 'firstLog', {path: '/'});
        	} else if ($.cookie('logState') === 'firstLog') {
            	$.cookie('logState', unescape);
            	$.removeCookie('logState', {path: '/'});
            	$.cookie('logState', 'refresh', {path: '/'});
        	}
    	}
   	 
    	if ($.cookie('logState') === 'firstLog') {
        	var firstLog = true;
    	} else {
        	var firstLog = false;
    	}
   	 
    	/**********************
    	* DATALAYER SECTIONS
    	***********************/
   	 
    	/**
    	* DATALAYER: Landing Page
    	* Fires any time a user first lands on the site. */
   	 
    	if ($.cookie('landingPage') === 'landed') {
        	dataLayer.push({
            	'pageType': 'Landing',
            	'event': 'first_time_visitor'
        	});
    	}
   	 
    	/**
    	* DATALAYER: Log State
    	* 1. Determine if user is logged in or not.
    	* 2. Return User specific data. */
   	 
    	var logState = {
        	{% if shop.customer_accounts_enabled %}
        	{% if customer %}
        	'userId'    	: {{customer.id | json}},
        	'customerEmail' : {{customer.email | json}},
        	'logState'  	: "Logged In",
        	'customerInfo'  : {
            	'firstName'   : {{customer_address.first_name | json}},
            	'lastName'	: {{customer_address.last_name | json}},
            	'address1'	: {{customer_address.address1 | json}},
            	'address2'	: {{customer_address.address2 | json}},
            	'street'  	: {{customer_address.street | json}},
            	'city'    	: {{customer_address.city | json}},
            	'province'	: {{customer_address.province | json}},
            	'zip'     	: {{customer_address.zip | json}},
            	'country' 	: {{customer_address.country | json}},
            	'phone'   	: {{customer_address.phone | json}},
            	'totalOrders' : {{customer.orders_count | json}},
            	'totalSpent'  : {{customer.total_spent | money_without_currency | remove: "," | json}}
        	},
        	{% else %}
        	'logState' : "Logged Out",
        	{% endif %}
        	{% endif %}
        	'firstLog'  	: firstLog,
        	'customerEmail' : {{customer.email | json}},
        	'timestamp' 	: Date().replace(/\(.*?\)/g,''),  
        	{% if customer.orders_count > 2 %}
        	'customerType'   	: 'Returning',
        	'customerTypeNumber' : '0',
        	{% else %}
        	'customerType'   	: 'New',
        	'customerTypeNumber' :'1',
        	{% endif %}
        	'shippingInfo' : {
            	'fullName'  : {{checkout.shipping_address.name | json}},
            	'firstName' : {{checkout.shipping_address.first_name | json}},
            	'lastName'  : {{checkout.shipping_address.last_name | json}},
            	'address1'  : {{checkout.shipping_address.address1 | json}},
            	'address2'  : {{checkout.shipping_address.address2 | json}},
            	'street'	: {{checkout.shipping_address.street | json}},
            	'city'  	: {{checkout.shipping_address.city | json}},
            	'province'  : {{checkout.shipping_address.province | json}},
            	'zip'   	: {{checkout.shipping_address.zip | json}},
            	'country'   : {{checkout.shipping_address.country | json}},
            	'phone' 	: {{checkout.shipping_address.phone | json}},
        	},
        	'billingInfo' : {
            	'fullName'  : {{checkout.billing_address.name | json}},
            	'firstName' : {{checkout.billing_address.first_name | json}},
            	'lastName'  : {{checkout.billing_address.last_name | json}},
            	'address1'  : {{checkout.billing_address.address1 | json}},
            	'address2'  : {{checkout.billing_address.address2 | json}},
            	'street'	: {{checkout.billing_address.street | json}},
            	'city'  	: {{checkout.billing_address.city | json}},
            	'province'  : {{checkout.billing_address.province | json}},
            	'zip'   	: {{checkout.billing_address.zip | json}},
            	'country'   : {{checkout.billing_address.country | json}},
            	'phone' 	: {{checkout.billing_address.phone | json}},
        	},
        	'checkoutEmail' : {{checkout.email | json}},
        	'currency'  	: {{shop.currency | json}},
        	'pageType'  	: 'Log State',
        	'event'     	: 'logState'
    	}
    	dataLayer.push(logState);
    	/**
    	* DATALAYER: Homepage */
   	 
    	if(document.location.pathname == "/"){
        	dataLayer.push({
            	'pageType' : 'Homepage',
            	'event'	: 'homepage',
            	logState
        	});
    	}
    	/**
    	* DATALAYER: 404 Pages
    	* Fire on 404 Pages */
 		 {% if template contains '404' %}
        	dataLayer.push({
            	'event':'404',
            	'page': window.location.pathname
        	});
 		 {% endif %}
    	/**
    	* DATALAYER: Blog Articles
    	* Fire on Blog Article Pages */
    	{% if template contains 'article' %}
        	dataLayer.push({
            	'author'  	: {{article.author | json}},
            	'title'   	: {{article.title | json}},
            	'dateCreated' : {{article.created_at | json}},
            	'pageType'	: 'Blog',
            	'event'   	: 'blog'
        	});
    	{% endif %}
   	 
    	/** DATALAYER: Product List Page (Collections, Category)
    	* Fire on all product listing pages. */
    	{% if template contains 'collection' %}
        	var ecommerce = {
            	'items': [
                	{% for product in collection.products %}{
                    	'item_id'    	: {{product.id | json}},             	 
                    	'item_variant'	: {{product.selected_or_first_available_variant.id | json}},        	 
                    	'item_name'  	: {{product.title | json}},
                    	'price'       	: {{product.price | money_without_currency | replace: ',', '.' | json}},
                    	'item_brand'  	: {{product.vendor | json}},
                    	'item_category'   : {{product.type | json}},
                    	'item_list_name'  : {{collection.title | json}},
                    	'imageURL'    	: "https:{{product.featured_image.src|img_url:'grande'}}",
                    	'productURL'  	: '{{shop.secure_url}}{{product.url}}',
                    	'sku'         	: {{product.selected_variant.sku | json}},
                	},
                	{% endfor %}]
            	};  
        	dataLayer.push({
            	'productList' : {{collection.title | json}},
            	'pageType'	: 'Collection',
            	'event'   	: 'view_item_list',
            	ecommerce
        	});
    	{% endif %}
       	 
    	/** DATALAYER: Product Page
    	* Fire on all Product View pages. */
    	{% if template contains 'product' %}  
        	var ecommerce = {
            	'items': [{
                	'item_id'    	: {{product.id | json}},  
                	'item_variant'	: {{product.selected_or_first_available_variant.id | json}},        	 
                	'item_name'  	: {{product.title | json}},
                	'price'       	: {{product.price | money_without_currency | replace: ',', '.' | json}},
                	'item_brand'  	: {{product.vendor | json}},
                	'item_category'   : {{product.type | json}},
                	'item_list_name'  : {{collection.title | json}},
                	'description' 	: {{product.description | strip_newlines | strip_html | json}},
                	'imageURL'    	: 'https:{{product.featured_image.src|img_url:'grande'}}',
                	'productURL'  	: '{{product.url}}'
            	}]
        	};          	 
        	dataLayer.push({
            	'pageType' : 'Product',
            	'event'	: 'view_item',
       		  ecommerce
       		 });
        	$(__DL__.cartTriggers).click(function(){
   			 dataLayer.push({               	 
                	'event'	: 'add_to_cart',
                	ecommerce
          		 });             	 
        	});         	 
     	 {% endif %}
    	/** DATALAYER: Cart View
    	* Fire anytime a user views their cart (non-dynamic) */          	 
    	{% if template contains 'cart' %}
        	var ecommerce = {
            	'currency': {{cart.currency.iso_code | json}},
            	'value': {{cart.total_price | divided_by: 100.0 | json}},
            	'items':[{% for line_item in cart.items %}{
                	'item_id'    	: {{line_item.product.id | json}},             	 
                	'item_variant'	: {{product.selected_or_first_available_variant.id | json}},        	 
                	'item_name'  	: {{line_item.product.title | json}},
                	'price'       	: {{line_item.product.price | money_without_currency | replace: ',', '.' | json}},
                	'item_brand'  	: {{line_item.product.vendor | json}},
                	'item_category'   : {{line_item.product.type | json}},
                	'item_list_name'  : {{line_item.collection.title | json}},
                	'quantity'    	: {{line_item.quantity | json}},
                	'discount'   	   : {{discount.code | json}}
            	},{% endfor %}],
        	};
        	dataLayer.push({
            	'pageType' : 'Cart',
            	'event'	: 'view_cart',
            	ecommerce
        	});
    	{% endif %}
           	 
    	/** DATALAYER: Checkout on Shopify Plus **/
    	if(Shopify.Checkout){
        	var ecommerce = {
            	'transaction_id': '{{checkout.order_number  | json}}',
            	'affiliation': {{shop.name | json}},
            	'value': {{checkout.total_price | money_without_currency | replace: ',', '.' | json}},
            	'tax': {{checkout.tax_price | money_without_currency | replace: ',','.' | json}},
            	'shipping': {{checkout.shipping_price | money_without_currency | replace: ',','.' | json}},
            	'subtotal': {{checkout.subtotal_price | money_without_currency| replace: ',','.' | json}},
            	'currency': {{checkout.currency | json}},
            	{% for discount in checkout.discounts %}
            	'coupon': {{discount.code | json}},
            	'discount'  : {{discount.amount | money_without_currency | json}},
            	{% endfor %}
            	'email': {{checkout.email | json}},
            	'items':[{% for line_item in checkout.line_items %}{
                	'item_id'    	: {{line_item.product.id | json}},             	 
                	'item_variant'	: {{product.selected_or_first_available_variant.id | json}},        	 
                	'item_name'  	: {{line_item.product.title | json}},
                	'price'       	: {{line_item.product.price | money_without_currency | replace: ',', '.' | json}},
                	'item_brand'  	: {{line_item.product.vendor | json}},
                	'item_category'   : {{line_item.product.type | json}},
                	'item_list_name'  : {{line_item.collection.title | json}},
                	'quantity'    	: {{line_item.quantity | json}},
                	'discount'   	   : {{discount.code | json}}
                	},{% endfor %}],
            	};
        	if(Shopify.Checkout.step){
            	if(Shopify.Checkout.step.length > 0){
                	if (Shopify.Checkout.step === 'contact_information'){
                    	dataLayer.push({
                        	'event'	:'begin_checkout',
                        	'pageType' :'Customer Information',
                        	'step': 1,
                   		 ecommerce
                    	});
                	}else if (Shopify.Checkout.step === 'shipping_method'){
                    	dataLayer.push({
                        	'event'	:'add_shipping_info',
                        	'pageType' :'Shipping Information',
                        	ecommerce
                    	});
                	}else if( Shopify.Checkout.step === "payment_method" ){
                    	dataLayer.push({
                        	'event'	:'add_payment_info',
                        	'pageType' :'Add Payment Info',
                   		 ecommerce
                    	});
                	}
            	}
                       	 
            	/** DATALAYER: Transaction */
            	if(Shopify.Checkout.page == "thank_you"){
                	dataLayer.push({
                	'pageType' :'Transaction',
                	'event'	:'purchase',
                	ecommerce
                	});
            	}          	 
        	}
    	}
         	 
    	/** DOM Ready **/    
    	$(document).ready(function() {
        	/** DATALAYER: Search Results */
        	var searchPage = new RegExp(__DL__.searchPage, "g");
        	if(document.location.pathname.match(searchPage)){
            	var ecommerce = {
                	items :[{% for product in search.results %}{
                    	'item_id'    	: {{product.id | json}},             	 
                    	'item_variant'	: {{product.selected_or_first_available_variant.id | json}},        	 
                    	'item_name'  	: {{product.title | json}},
                    	'price'       	: {{product.price | money_without_currency | replace: ',', '.' | json}},
                    	'item_brand'  	: {{product.vendor | json}},
                    	'item_category'   : {{product.type | json}},
                    	'item_list_name'  : {{product.collection.title | json}},
                	},{% endfor %}],
            	};
            	dataLayer.push({
                	'pageType'   : "Search",
                	'search_term' : __DL__.searchTermQuery,                                  	 
                	'event'  	: "search",
                	'item_list_name'  : {{line_item.collection.title | json}},
                	ecommerce
            	});    
        	}
       	 
        	/** DATALAYER: Remove From Cart **/
        	{% if template contains 'cart' %}
            	var ecommerce = {
                	'items':[{% for line_item in cart.items %}{
                    	'item_id'    	: {{line_item.product.id | json}},             	 
                    	'item_variant'	: {{product.selected_or_first_available_variant.id | json}},        	 
                    	'item_name'  	: {{line_item.product.title | json}},
                    	'price'       	: {{line_item.product.price | money_without_currency | replace: ',', '.' | json}},
                    	'item_brand'  	: {{line_item.product.vendor | json}},
                    	'item_category'   : {{line_item.product.type | json}},
                    	'item_list_name'  : {{line_item.collection.title | json}},
                    	'quantity'    	: {{line_item.quantity | json}},
                    	'discount'   	   : {{discount.code | json}}
                	},{% endfor %}],
            	};
           	 
            	$(__DL__.removeCartTrigger).click(function(){
                	dataLayer.push({
                    	'pageType'   : "Remove from cart",
                    	'event' : 'remove_from_cart',
                    	ecommerce
                	});                            	 
            	});          	 
        	{% endif %}

        	/** Google Tag Manager **/
        	(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-AAAAAAA');

    	}); // document ready
	}
}, 500);
</script>

Begin checkout data layer:

onclick="dataLayer.push({  
  	event: 'begin_checkout',
    ecommerce:{
    value: {{ cart.total_price | times: 0.01 }}, 
    currency: '{{ cart.currency.iso_code }}', 
    items: [
         {% for line_item in cart.items %}{
         item_id: '{{line_item.product_id}}',
         item_name: '{{line_item.title}}',
         quantity: {{line_item.quantity}},
         price: {{line_item.original_price | times: 0.01}}
         },{% endfor %}
         ]
}
});"

Purchase data layer:

<script>
{% if first_time_accessed %}
window.dataLayer = window.dataLayer || [];
dataLayer.push({
 event: 'purchase',
 checkoutEmail: '{{ checkout.email }}',
 fullName: '{{ checkout.billing_address.name }}',  
 firstName: '{{ checkout.billing_address.first_name }}',  
 lastName: '{{ checkout.billing_address.last_name }}',  
 address1: '{{ checkout.billing_address.address1 }}',  
 address2: '{{ checkout.billing_address.address2 }}',  
 street: '{{ checkout.billing_address.street }}',  
 city: '{{ checkout.billing_address.city }}',  
 province: '{{ checkout.billing_aaddress.province_code }}',  
 zip: '{{ checkout.billing_address.zip }}',  
 country: '{{ checkout.billing_address.country_code }}',  
 phone: '{{ checkout.billing_address.phone }}', 
 ecommerce:{
 currency: '{{ checkout.currency }}',
 value: {{total_price | times: 0.01}},
 transaction_id: '{{order_number}}',
 tax: {{tax_price | times: 0.01}},
 shipping: {{shipping_price | times: 0.01}},
 affiliation: '{{ shop.domain }}',
 items: [
         {% for line_item in line_items %}{
         item_id: '{{line_item.product_id}}',
         item_name: '{{line_item.title}}',
         quantity: {{line_item.quantity}},
         price: {{line_item.original_price | times: 0.01}}
         },{% endfor %}
         ]
 }
 });
 {% endif %}
</script>

Go to video.

  1. You have to copy the first Datalayer from the article.
  2. Go to your Shopify dashboard.
  3. Click on Online Store from the left side menu. If you can’t find it, click on the Sales channel, and you’ll find the Online Store.
  4. Now click on the three dots menu beside your current theme section, and from the drop-down, click on Edit code.
  5. Now, search for the Snippets folder in the files menu, and click on Add a new snippet.
  6. Name the new Snippet “ecommerce-dataLayer-all-pages” and paste the copied code here.
  7. Go to your Google Tag Manager dashboard and copy your GTM ID. 
  8. Go back to your theme code and open the ecommerce-dataLayer-all-pages file.
  9. Now search for “GTM-AAAAAAA” and replace it with your GTM ID.
  10. Click on save.
  11. Now, open the theme.liquid from the left side menu on the same page.
  12. In the code, paste this “{% include 'ecommerce-dataLayer-all-pages' %}” as high as possible.
  13. Click on save.
  14. Let’s set up data layers for checkout buttons. 
  15. Click on the three dots menu beside your current theme section, and from the drop-down, click on Edit code.
  16. This item may be a little tricky to find because it might depend from theme to theme. So we are looking for cart-notification.liquid in our case.
  17. Now, within cart-notification.liquid find checkout button code to be specific button class. After the “name=”checkout” paste the begin checkout e-commerce data layer code from the article.
  18. Click on save.
  19. Now, search for the main-cart-footer.liquid code and find the checkout button code as a specific button class. After the “name=”checkout” paste again, the begin checkout e-commerce data layer code from the article.
  20. Click on save.
  21. Let’s set up Purchase Datalayer. 
  22. Go to the admin dashboard of Shopify.
  23. Click on settings from the bottom left side.
  24. Click on the Checkout option from the left side menu.
  25. Scroll down to the Order status page section.
  26. Now paste the purchase code from the article into the Additional scripts.
  27. Copy the head code from the GTM dashboard by clicking on GTM ID.
  28. And paste it in the Additional Scripts below the data layer pasted previously.
  29. Now, go to your theme.liquid and in the “body section” paste the GTM body code. (found in the GTM dashboard by clicking on the GTM ID)
  30. Click on save.

Video: Setup data layers in Shopify theme code

Creating a Facebook Pixel account and verifying the domain:

  1. Let’s start by creating a pixel for your account.
  2. Go to your Facebook/Meta Business Account. 
  3. Now, from the left side menu, click on “Data Sources” and then click on “Datasets.”
  4. Then click on Add.
  5. Now, name your pixel. You can also use your website name.
  6. Click on Create. 
  7. Now, in the “People,” you can add yourself to it. And give access.
  8. Then click on “Connected assets” and click on Add assets. Now, you can connect your ads account to it.
  9. Now, let’s add a domain for verification. Locate “Domains” from the left menu under “Brand Safety and Suitability.”
  10. Then click on Add and click on “Create a new domain.”
  11. Now, type your domain and click on Add.
  12. For domain verification, you can do DNS verification.
  13. From the drop-down below, Verify your domain and select “Update the DNS TXT record with your domain registrar.”
  14. Copy the TXT record in the Second option.
  15. Go to your DNS records manager. In my case, it is Namecheap.
  16. Now, create a TXT record. Type “@” in the hostname and add the copied TXT record in the value field.
  17. Click on save. Now, give it time to get updated before clicking Verify Domain.
  18. Create a Google Doc or any other document file to keep the records. 
  19. First, paste your Pixel ID into it. You can find your Facebook Pixel ID in “Data Sources” > “Datasets”
  20. Now, let’s create an Access Token. Go to your Events Manager and then click on Settings.
  21. Now scroll down, and you should enable the “Automatic Website Matching” toggle. You will find “Set up direct integration, ” then click “Generate access token.”
  22. Copy the token and paste it into the document file.
  23. Click “Test events” in Events Manager and “Confirm your server’s events are set up correctly.” Copy the code. And paste it into the document file.
  24. Once you have verified your domain, click “Connected assets” and connect your page to it.

Video: Create the Facebook Pixel & Verify domain for Setup Conversion API Facebook Shopify

Creating a GTM web account and a server account: Go to Video.

  1. Go to your Google Tag Manager web account.
  2. From the top menu, click on “Admin.” 
  3. Now, click on the “+” symbol beside the Container menu
  4. Name your server, and select Server from the below options.
  5. Click on Create.
  6. Now, we will be setting up a server. To do that, visit stape.io
  7. If you don’t have an account, then you can create one. 
  8. Once your account is ready, click on your profile, under the “Workspace” dropdown, click “My Workspace.”
  9. Now click on “Create Container.” 
  10. Name your container, and return to your GTM Server dashboard to get the value of the “Container configuration” field.
  11. In your GTM server dashboard, click “Admin” from the top menu.
  12. Now, click “Container settings” under “Container” options.
  13. Then click on the “Set up your tagging server” button.
  14. Click “Manually provision tagging server” and copy the container config code.
  15. Go back to Stape.io and paste it into the “Container configuration” field.
  16. In server location, choose the closest server to your location. In our case, it is South Carolina.
  17. Click on Create. After that, you’ll be introduced to prices, and you can choose the free plan.
  18. Once you have created your container in Stape.io, you’ll be redirected to your dashboard.
  19. Now, scroll down to the “Domain” section.
  20. In the Global CDN radio buttons, choose “Stape global CDN.”
  21. Below this option, click on “Add domain.”
  22. Now, name your sub-domain. In our case, it is “gtsw.shiningwrist.com”
  23. Once added, you must configure your DNS to verify the new subdomain.
  24. Go to your DNS manager. Now, create an “A” record and copy the values from the instructions given in Stape.io.
  25. Now, create a second record, i.e., a “CNAME” record, and copy the values from the instruction given in Stape.io again.
  26. After adding the values, try to refresh the Stape.io dashboard to check the domain verification.
  27. Once the domain is verified, copy it.
  28. Go to your GTM server dashboard and click “Admin” from the top menu.
  29. Now, click “Container settings” under “Container” options.
  30. Paste the subdomain in “Server container URL.”
  31. Click on save.
  32. 32. By this, we have completed the setup of the GTM server account.

Video: Create the GTM Web & Server account

Setting up GA4 tag in GTM Web: Go to Video.

  1. Go to your GTM web server and click on tags.
  2. Now, click on New.
  3. In the tag configuration, click on Google Analytics and then click on Google Tag.
  4. In the Tag ID, we need to place our GA4 ID.
  5. To get the GA4 ID, we have to go to our GA4 dashboard, and in the search bar, search for “Tracking ID.” you should find a Copy button and click on it.
  6. Go back to your GTM dashboard in the TAG ID and paste this code.
  7. In the Triggering sections, select “All pages” as your trigger. If you need to modify All pages, you can also do that.
  8. In the Tag configuration, click on the Configuration settings dropdown.
  9. Click on Add parameter.
  10. The first parameter is for sending page views. So, type “send_page_view” in the parameter and the value type “true.”
  11. In the second parameter, type “transport_url,” and in the value, copy and paste the same subdomain that we have created in Stape.io.
  12. In the third parameter, type “event_id,” and in the value field, click on the symbol to create a new variable.
  13. Click on the “+” icon, click on the Variable Configuration section, and now click on “Discover more variable types in the Community Template Gallery” and search for “Unique Event ID” by Stape.io. Now click on “Add to workspace”.
  14. Once added, you can again go to Variable Configuration, and you’ll have a new option, “Unique Event ID.” click on it and click on Save.
  15. In the fourth parameter, type “user_id” and leave blank the value field.
  16. Now, give a name to your Tag. For example, “Google-Tag-GA-4-PageView-All Pages” and click on save.
  17. You can now check If all the events are showing up in debug mode.
  18. Once verified, we can now create more tags to record events.
  19. Let’s create a tag for the View Item List. In your GTM web dashboard, Click on New to create a new Tag.
  20. After clicking on New, click Tag Configuration and Google Analytics: GA4 Events.
  21. In the Measurement ID field, type your GA4 ID as mentioned in Step 5.
  22. In the Event Name field, type “view_item_list”.
  23. Create a trigger by clicking on the trigger section.
  24. Now, click on the + icon. In trigger configuration, choose Custom Event.
  25. In the event name field, type “view_item_list.” 
  26. Name the trigger as E-view_item_list.
  27. Save the trigger.
  28. Again, in the tag setup, click on Event Parameters and click on Add parameter.
  29. In the Event Parameter Name, write “items”.
  30. Now, In the value section beside the event parameter name, click on the small icon in the field, click on the + icon, then click on Variable Configuration, and choose Data Layer Variable. Now, in the Data Layer Variable Name, you have to write the structure to locate the value from the Data Layer code on the website. In this case, it is “ecommerce. items”. Now name the variable “dlv-ecommerce.items” and click on save. 
  31. Name the tag “GA-4-view_item_list” and click on save.
  32. Let’s create the following tag. Click on New.
  33. Click on Tag Configuration, choose Google Analytics, and click on Google Analytics: GA4 Event.
  34. Now, paste your GA-4 ID in the Measurement ID field.
  35. Name the event as view_item in the event name field.
  36. Create a trigger by clicking on the trigger section.
  37. Now, click on the + icon. In trigger configuration, choose Custom Event.
  38. In the event name field, type “view_item” 
  39. Name the trigger as E-view_item. However, you can name the trigger as per your liking.
  40. Save the trigger.
  41. Again, in the tag setup, click on Event Parameters and click on Add parameter.
  42. The first parameter is value. So, in the event parameter name, write “value.”
  43. Now, In the value section beside the event parameter name, click on the small icon in the field, click on the + icon, then click on Variable Configuration, and choose Data Layer Variable. Now, in the Data Layer Variable Name, you have to write the structure to locate the value from the Data Layer code on the website. In this case, it is “ecommerce.items.0.price”. Now name the variable as “dlv-ecommerce.items.0.price” and click on save.
  44. The following parameter is currency. So, in the event parameter name, write “currency.”
  45. Now, In the value section beside the event parameter name, follow the same instruction from Step 30 for creating the Variable. In the Data Layer Variable Name, write “currency.” Now, name the variable “dlv-currency” and click on save.
  46. The following parameter is items. So, in the event parameter name, write “items.”
  47. Now, In the value section beside the event parameter name, follow the same instruction from Step 30 for creating the Variable. In the Value field beside it, type “{{“ items, and you’ll see the already saved variables. Choose {{dlv-ecommerce.items}}.
  48. Now, name the tag “GA-4-view_item” and save the tag.
  49. Let’s create the following tag, which is Add to Cart.
  50. Click on New, then click on Tag Configuration, choose Google Analytics, and click on Google Analytics: GA4 Event.
  51. Now, paste your GA-4 ID in the Measurement ID field.
  52. Name the event as add_to_cart in the event name field.
  53. Create a trigger by clicking on the trigger section.
  54. Now, click on the + icon. In trigger configuration, choose Custom Event.
  55. In the event name field, type “add_to_cart.” 
  56. Name the trigger as E-add_to_cart.
  57. Save the trigger.
  58. Again, in the tag setup, click on Event Parameters and click on Add parameter.
  59. The first parameter is value. So, in the event parameter name, write “value,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables. Choose {{dlv-ecommerce.items.0.price}}.
  60. The following parameter is currency. So, in the event parameter name, write “currency,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables. Choose {{dlv-currency}}.
  61. The following parameter is items. So, in the event parameter name, write “items,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables. Choose {{dlv-ecommerce.items}}. Now save the tag.
  62. Let’s create the following tag, which is Begin Checkout.
  63. Click on New, then click on Tag Configuration, choose Google Analytics, and click on Google Analytics: GA4 Event.
  64.  Now, paste your GA-4 ID in the Measurement ID field.
  65. Name the event as begin_checkout in the event name field.
  66. Create a trigger by clicking on the trigger section.
  67. Now, click on the + icon. In trigger configuration, choose Custom Event.
  68. In the event name field, type “begin_checkout.”
  69. Name the trigger as E-begin_checkout.
  70. Save the trigger.
  71. Again, in the tag setup, click on Event Parameters and click on Add parameter.
  72. The first parameter is value. So, in the event parameter name, write “value”.
  73. Now, In the value section beside the event parameter name, follow the same instruction from Step 30 for creating the Variable. In the Data Layer Variable Name, write “ecommerce.value.” Now name the variable “dlv-ecommerce.value” and click on save.
  74. Now, In the value section beside the event parameter name, follow the same instruction from Step 30 for creating the Variable. In the Data Layer Variable Name, write “ecommerce.currency”. Now name the variable “dlv-ecommerce.currency” and click on save.
  75. The following parameter is items. So in the event parameter name, write “items,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables, choose {{dlv-ecommerce.items}}.
  76. Click on save. 
  77. Let’s create the following tag, which is Purchase.
  78. Click on New, then click on Tag Configuration, choose Google Analytics, and click on Google Analytics: GA4 Event.
  79. Now, paste your GA-4 ID in the Measurement ID field.
  80. Name the event as purchase in the event name field.
  81. Create a trigger by clicking on the trigger section.
  82. Now, click on the + icon. In trigger configuration, choose Custom Event.
  83. In the event name field, type “purchase.”
  84. Name the trigger as E-purchase.
  85. Save the trigger.
  86. Again, in the tag setup, click on Event Parameters and click on Add parameter.
  87. The first parameter is value. So, in the event parameter name, write “value,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables. Choose {{dlv-ecommerce.value}}.
  88. The following parameter is currency. So, in the event parameter name, write “currency,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables. Choose {{dlv-ecommerce.currency}}.
  89. The following parameter is items. So in the event parameter name, write “items,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables, choose {{dlv-ecommerce.items}}.
  90. The following parameter is transaction ID. So, in the event parameter name, write “transaction_id”.
  91. Now, In the value section beside the event parameter name, follow the same instruction from Step 30 for creating the Variable. In the Data Layer Variable Name, write “ecommerce.transaction_id”. Now name the variable “dlv-ecommerce.transaction_id” and click on save.
  92. The following parameter is Affiliation. So, in the event parameter name, write “affiliation.”
  93. Now, In the value section beside the event parameter name, follow the same instruction from Step 30 for creating the Variable. In the Data Layer Variable Name, write “ecommerce.affiliation”. Now name the variable “dlv-ecommerce.affiliation” and click on save.
  94. The following parameter is Shipping. So, in the event parameter name, write “shipping.”
  95. Now, In the value section beside the event parameter name, follow the same instruction from Step 30 for creating the Variable. In the Data Layer Variable Name, write “ecommerce.shipping”. Now name the variable “dlv-ecommerce.shipping” and click on save.
  96. The last parameter is Tax. So, in the event parameter name, write “tax.”
  97. Now, In the value section beside the event parameter name, follow the same instruction from Step 30 for creating the Variable. In the Data Layer Variable Name, write “ecommerce.tax”. Now name the variable “dlv-ecommerce.tax” and click on save.
  98. Now, save the tag.
  99. Let’s create the following tag, which is View Cart.
  100. Click on New, then click on Tag Configuration, choose Google Analytics, and click on Google Analytics: GA4 Event.
  101. Now, paste your GA-4 ID in the Measurement ID field.
  102. Name the event as view_cart in the event name field.
  103. Create a trigger, by clicking on the trigger section.
  104. Now, click on the + icon. In trigger configuration, choose Custom Event.
  105. In the event name field, type “view_cart.”
  106. Name the trigger as E-view_cart.
  107. Save the trigger.
  108. Again, in the tag setup, click on Event Parameters, and click on Add parameter.
  109. The first parameter is value. So, in the event parameter name, write “value,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables. Choose {{dlv-ecommerce.value}}.
  110. The following parameter is currency. So, in the event parameter name, write “currency,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables. Choose {{dlv-ecommerce.currency}}.
  111. The following parameter is items. So in the event parameter name, write “items,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables, choose {{dlv-ecommerce.items}}.
  112. Now, name the tag “GA-4-view_cart” and click on save.
  113. Let’s create our last tag, which is Remove From Cart.
  114. Click on New, then click on Tag Configuration, choose Google Analytics, and click on Google Analytics: GA4 Event.
  115. Now, paste your GA-4 ID in the Measurement ID field.
  116. Name the event as view_cart in the event name field.
  117. Create a trigger, by clicking on the trigger section.
  118. Now, click on the + icon. In trigger configuration, choose Custom Event.
  119. In the event name field, type “remove_from_cart.”
  120. Name the trigger as E-remove_from_cart.
  121. Save the trigger.
  122. Again, in the tag setup, click on Event Parameters and click on Add parameter.
  123. The first parameter is value. So, in the event parameter name, write “value,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables. Choose {{dlv-ecommerce.value}}.
  124. The following parameter is currency. So, in the event parameter name, write “currency,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables. Choose {{dlv-ecommerce.currency}}.
  125. The following parameter is items. So in the event parameter name, write “items,” and in the Value field beside it, type “{{“ items, and you’ll see the already saved variables, choose {{dlv-ecommerce.items}}.
  126. Now, name the tag “GA-4-remove_from_cart” and click on save.
  127. Before testing, we must ensure all the tags send data correctly with Unique IDs.
  128. We have to add a few more parameters to all the tags to do that. Let’s start with the View Item List.
  129. In the Event parameters for View Item List, add a new parameter by clicking Add parameter and typing “transport_url” as the name, and in the value, copy and paste the same subdomain we created in Stape.io. Now save the tag.
  130. Next, “View Item” Tag, click on Add parameter, and type “transport_url” as the name, and in the value, copy and paste the same subdomain we created in Stape.io.
  131. Again, click on Add parameter, and type “event_id,” and in the Value field, type “{{Unique Event ID}}” This tag was created previously. Refer to Step 13. Now save the tag.
  132. Next, “Purchase” Tag, click on Add parameter, and type “transport_url” as the name, and in the value, copy and paste the same subdomain we created in Stape.io.
  133. Again, click on Add parameter, and type “event_id,” and in the Value field, type “{{dlv-ecommerce.transaction_id}}” This tag was created previously. Refer to Step 91. Now save the tag.
  134. Next, click on the “Begin Checkout” Tag, click on the Add parameter, and type “transport_url” as the name. And in the value, copy and paste the same subdomain we created in Stape.io.
  135. Again, click on Add parameter, and type “event_id,” and in the Value field, type “{{Unique Event ID}}” and save the tag.
  136. Next, “Add to cart” Tag, click on the Add parameter, and type “transport_url” as the name and value. Please copy and paste the same subdomain we created in Stape.io.
  137. Again, click on Add parameter, and type “event_id,” and in the Value field, type “{{Unique Event ID}}” and save the tag.
  138. Next, “View Cart” Tag, click on the Add parameter, type “transport_url” as the name and value, and copy and paste the same subdomain we created in Stape.io.
  139. Save the tag.

Video: Setting up GA4 tag in GTM Web for the Setup Conversion API Facebook Shopify

Sending user data to the server via GA4: Go to Video.

  1. Let’s set up Variables and Parameters to send User Data to our Server.
  2. To do that, open your GTM dashboard and click “Variables” from the left-side menu.
  3. Now, click on New.
  4. After opening, click on Variable Configuration and click on Data Layer Variable.
  5. You have to copy and paste the value from the Purchase event. In this case, we are using Checkout Email. So, you have to type “checkoutEmail” in the Data Layer Variable Name field. Now, name the Variable “dlv-checkoutEmail” for your reference and click on save.
  6. Let’s create the following Variable again. Click on New.
  7. After opening, click on Variable Configuration and click on Data Layer Variable.
  8. You have to copy and paste the value from the Purchase event. In this case, we are using First Name. So, you have to type “firstName” in the Data Layer Variable Name field. Now, name the Variable “dlv-firstName” for your reference and click on save.
  9. Let’s create the following Variable again. Click on New.
  10. After opening, click on Variable Configuration and click on Data Layer Variable.
  11. You must copy and paste the value from the Purchase event again. In this case, we are using Last Name. So, you have to type “lastName” in the Data Layer Variable Name field. Now, name the Variable “dlv-lastName” for your reference and click on save.
  12. Let’s create the following variable for the street again. Click on New.
  13. After opening, click on Variable Configuration and click on Data Layer Variable.
  14. This Variable is for the Street. Thus, the value is “street” as per the Data Layer. So, you have to type “street” in the Data Layer Variable Name field. Now, name the Variable “dlv-street” for your reference and click on save.
  15. Let’s create the following variable for the city again: click on New.
  16. After opening, click on Variable Configuration and click on Data Layer Variable.
  17. This Variable is for the City. Thus, the value is “city” as per the Data Layer. So, you have to type “city” in the Data Layer Variable Name field. Now, name the Variable “dlv-city” for your reference and click on save.
  18. Let’s create the following variable for the province again: click on New.
  19. After opening, click on Variable Configuration and click on Data Layer Variable.
  20. This Variable is for the Province. Thus, the value is “province” as per the Data Layer. So, you have to type “province” in the Data Layer Variable Name field. Now, name the Variable “dlv-province” for your reference and click on save.
  21. Let’s create the following variable for the zip code again: click on New.
  22. After opening, click on Variable Configuration and click on Data Layer Variable.
  23. This Variable is for the Zip Code. Thus, the value is “zip” as per the Data Layer. So, you have to type “zip” in the Data Layer Variable Name field. Now, name the Variable “dlv-zip” for your reference and click on save.
  24. Let’s create the following variable for the country again: click on New.
  25. After opening, click on Variable Configuration and click on Data Layer Variable.
  26. This Variable is for the Country. Thus, the value is “country” as per the Data Layer. So, you have to type “country” in the Data Layer Variable Name field. Now, name the Variable “dlv-country” for your reference and click on save.
  27. Let’s create the following variable for the phone again: click on New.
  28. After opening, click on Variable Configuration and click on Data Layer Variable.
  29. This Variable is for the Phone. Thus, the value is “phone” as per the Data Layer. So, you have to type “phone” in the Data Layer Variable Name field. Now, name the Variable “dlv-phone” for your reference and click on save.
  30. Our next step is to copy and paste the User data custom javascript code from the article.
  31. Copy the code, return to your GTM dashboard, Variables, and create a new variable by clicking New.
  32. After opening, click on Variable Configuration and click on Custom Javascript.
  33. Now, In the Custom Javascript field, paste the copied code.
  34. After pasting, name the variable “cj-user-data” for your reference and click on save.
  35. Now, go to your Tags, open the Purchase tag, and click “Add parameter.”
  36. Type “user-data” in the name field and “cj-user-data” in the value field to recall our previously saved variables. The actual value will be “{{cj-user-data}}”
  37. Now, add another parameter, type “user_data.phone_number,” and in the value field, type “dlv-phone” to recall our previously saved variables. The actual value will be “{{dlv-phone}}”
  38. Add another parameter, type “first_party_collection” in the name field, and in the value field, type “true.”
  39. Add another parameter: type “user_id” in the name and value fields. Click on the icon and “+” to create a new variable.
  40. After opening, click on Variable Configuration and click on Data Layer Variable.
  41. In the Data Layer Variable Name field, type “userId”. Now, name the Variable “dlv-userId” for your reference and click on save. So, this way, we have populated the value field in the Parameter settings.
  42. Click on save.
  43. Let’s add User Data parameters to our other essential tags, too.
  44. Return to Tags, open the “Google-Tag-GA-4-PageView-All Pages” tag, and click “Add parameter.”
  45. Type “first_party_collection” in the name field, and the value field, type “true.”
  46. Add another parameter, type “user_data.email_address,” and click the icon and “+” in the value field to create a new variable.
  47. After opening, click on Variable Configuration and click on Data Layer Variable.
  48. In the Data Layer Variable Name field, type “customerEmail”. Now, name the Variable “dlv-customerEmail” for your reference and click on save. So, this way, we have populated the value field in the Parameter settings.
  49. Earlier, while creating the same Tag, we had left the Value field empty for the “user_id” parameter. So, let’s add it now. In the value field, type “dlv-userId” to recall our previously saved variables. The actual value will be “{{dlv-userId}}”
  50. Now save the tag.
  51. Return to Tags, open the View Item tag, and click “Add parameter.”
  52. Type “user_id,” and in the value field, type “dlv-userId” to recall our previously saved variables. The actual value will be “{{dlv-userId}}”
  53. Add another parameter, type “first_party_collection” in the name field, and in the value field, type “true.”
  54. Add another parameter, type “user_data.email_address” in the value field, and type “dlv-customerEmail” to recall our previously saved variables. The actual value will be “{{dlv-customerEmail}}”
  55. Now save the tag.
  56. Return to Tags, open the View Item List tag, and click “Add parameter.”
  57. Type “user_id,” and in the value field, type “dlv-userId” to recall our previously saved variables. The actual value will be “{{dlv-userId}}.”
  58. Save the tag.
  59. Now, open the View Cart tag and click “Add parameter.”
  60. Type “user_id,” and in the value field, type “dlv-userId” to recall our previously saved variables. The actual value will be “{{dlv-userId}}.”
  61. Save the tag.
  62. Now, open the Remove From Cart tag and click “Add parameter.”
  63. Type “user_id,” and in the value field, type “dlv-userId” to recall our previously saved variables. The actual value will be “{{dlv-userId}}.”
  64. Add another parameter, type “transport_url,” and in the value, copy and paste the same subdomain that we have created in Stape.io.
  65. Save the tag.
  66. Now, open the Begin Checkout tag and click “Add parameter.”
  67. Type “user_id,” and in the value field, type “dlv-userId” to recall our previously saved variables. The actual value will be “{{dlv-userId}}.”
  68. Add another parameter, type “first_party_collection” in the name field, and in the value field, type “true.”
  69. Add another parameter, type “user_data.email_address,” in the value field, and type “dlv-customerEmail” to recall our previously saved variables. The actual value will be “{{dlv-customerEmail}}.”
  70. Save the tag.
  71. Now, open the Add to Cart tag and click “Add parameter.”
  72. Type “user_id,” and in the value field, type “dlv-userId” to recall our previously saved variables. The actual value will be “{{dlv-userId}}.”
  73. Add another parameter, type “first_party_collection” in the name field, and in the value field, type “true.”
  74. Add another parameter, type “user_data.email_address” in the value field, and type “dlv-customerEmail” to recall our previously saved variables. The actual value will be “{{dlv-customerEmail}}.”
  75. Save the tag.

Video: Send user data to the server via GA4

Setting up Facebook Pixel Web Tag in GTM: Go to Video.

  1. Go to your GTM dashboard and open your web container.
  2. Click on Tags from the left side menu.
  3. Click on New, and click on Tag Configuration.
  4. After opening Tag Configuration, click on Community Template Gallery.
  5. Now, search for “Facebook Pixel” and click “Facebook Pixel by Facebook archive.”
  6. Add it to the workspace.
  7. Once added, you will have the option to add your Facebook Pixel ID.
  8. In the Facebook Pixel ID field, click on the icon and click the “+” to create a new variable.
  9. After opening, click on Variable Configuration and click on Constant.
  10. In the Value field, paste your Facebook Pixel ID. (Previously, we had created a document file for all these values. You can also use that)
  11. Now, name the variable “FB-ID-(YOUR ID)” for your reference and save the variable.
  12. In the Tag Configuration, scroll down to More Settings, and in the Event ID field, type Event ID to recall the previously saved variables. The actual value will be “{{Unique Event ID}}”
  13. Also, check the box where it says “Enable Advanced Matching.”
  14. Now, open the Customer Information Data Parameters. In the name field, choose Email from the Dropdown, and in the value field, type “dlv-customerEmail” to recall our previously saved variables. The actual value will be “{{dlv-customerEmail}}.”
  15. Add another parameter. In the Name field, choose “External ID” from the Dropdown, and in the value field, type “dlv-userId” to recall our previously saved variables. The actual value will be “{{dlv-userId}}.”
  16. Now, go to your Trigger section, click on it, and select “All Pages.”
  17. Name the Tag “FB-Base-Code-PageView-All Pages” for your reference and save the tag.
  18. Let’s create the following tag, which is the View Item event.
  19. Click on New in Tags, and click on Tag Configuration.
  20. After opening Tag Configuration, please scroll down to find the Facebook Pixel and click on it.
  21. In the Facebook Pixel ID field, type “FB ID” to recall our previously saved variables. The actual value will be “{{FB-ID-(YOUR ID)}}.”
  22. Below this, you’ll find radio buttons, choose Standard, and in the Dropdown, choose “ViewContent.”
  23. Again, check the box for “Enable Advanced Matching.”
  24. Now, open the Customer Information Data Parameters. In the name field, choose Email from the Dropdown, and in the value field, type “dlv-customerEmail” to recall our previously saved variables. The actual value will be “{{dlv-customerEmail}}.”
  25. Add another parameter. In the Name field, choose “External ID” from the Dropdown, and in the value field, type “dlv-userId” to recall our previously saved variables. The actual value will be “{{dlv-userId}}.”
  26. Next, we have to send the product information too. To do that, open Object Properties just below Customer Information Data Parameters.
  27. Click on Add property, and type “content_name” in the Property Name field and the Property Value field, click on the icon, then click on the “+” icon, and click on the Variable Configuration section.
  28. After opening, click on Variable Configuration and click on Data Layer Variable.
  29. This Variable is for the Item Name. Thus, the value is “ecommerce.items.0.item_name” per the Data Layer. So, you have to type “ecommerce.items.0.item_name” in the Data Layer Variable Name field. Now, name the Variable “dlv-ecommerce.items.0.item_name” for your reference and click on save.
  30. Again, Click on Add property, type “content_type” in the Property Name field, and type ” product ” in the Property Value field.
  31. Add another property, type “contents” in the Property Name field, and in the Property Value field, type “dlv-ecommerce.items” to recall our previously saved variables. The actual value will be “{{dlv-ecommerce.items}}.”
  32. Add another property, type “currency” in the Property Name field, and in the Property Value field, type “dlv-currency” to recall our previously saved variables. The actual value will be “{{dlv-currency}}”
  33. Add another property, type “num_items” in the Property Name field, and in the Property Value field, type “1”.
  34. Add another property, type “value” in the Property Name field, and in the Property Value field, type “dlv-ecommerce.items.0.price” to recall our previously saved variables. The actual value will be “{{dlv-ecommerce.items.0.price}}.”
  35. Add another property, type “first_party_collection” in the Property Name field, and in the Property Value field, type “true.”
  36. In the Tag Configuration, scroll down to More Settings, and in the Event ID field, type Event ID to recall the previously saved variables. The actual value will be “{{Unique Event ID}}.”
  37. Now, go to your Trigger section, click on it, and select “E-view_item” (previously created).
  38. Name the Tag “FB-Event-ViewContent” for your reference and save the tag.
  39. Let’s create the following tag: the Add to Cart event.
  40. To save time, you can duplicate the “FB-Event-ViewContent” tag.
  41. You can name the Tag “FB-Event-AddToCart.”
  42. This time, major values are already pre-filled because we have duplicated the tag.
  43. Start by changing the Event Name below the Facebook Pixel ID field. Choose Standard, and in the Dropdown, choose “AddToCart.”
  44. In the Tag Configuration, scroll down to More Settings, and in the Event ID field, type Event ID to recall the previously saved variables. The actual value will be “{{Unique Event ID}}.”
  45. Now, go to your Trigger section, click on it, and select “E-add_to_cart” (previously created).
  46. Save the Tag.
  47. Let’s create the following tag, which is the Initiate Checkout event.
  48. To save time, we will again duplicate the “FB-Event-ViewContent” tag.
  49. You can name the Tag “FB-Event-InitiateCheckout.”
  50. Start by changing the Event Name below the Facebook Pixel ID field. Choose Standard, and in the Dropdown, choose “InitiateCheckout.”
  51. In the Object Properties, change the Property Value for “value.” Click on the property value field and type “dlv-ecommerce.value” to recall our previously saved variables. The actual value will be “{{dlv-ecommerce.value}}.”
  52. Again, in the Object Properties, change the Property Value for “currency.” Click on the property value field and type “dlv-ecommerce.currency” to recall our previously saved variables. The actual value will be “{{dlv-ecommerce.currency}}.”
  53. In the Tag Configuration, scroll down to More Settings, and in the Event ID field, type Event ID to recall the previously saved variables. The actual value will be “{{Unique Event ID}}.”
  54. Now, go to your Trigger section, click on it, and select “E-begin_checkout” (previously created).
  55. Save the Tag.
  56. Let’s create the following tag, which is the Purchase event.
  57. To save time, we will duplicate the “FB-Event-InitiateCheckout” tag.
  58. You can name the Tag “FB-Event-Purchase.”
  59. Start by changing the Event Name below the Facebook Pixel ID field. Choose Standard, and in the Dropdown, choose “Purchase.”
  60. In the “Customer Information Data Parameters,” we have to change the value for “Email,” so type “dlv-checkoutEmail” to recall our previously saved variables. the actual value will be “{{dlv-checkoutEmail}}.”
  61. Add another parameter. In the Name field, choose “City” from the Dropdown, and in the value field, type “dlv-city” to recall our previously saved variables. The actual value will be “{{dlv-city}}.” 
  62. Add another parameter. In the Name field, choose “Country” from the Dropdown, and in the value field, type “dlv-country” to recall our previously saved variables. The actual value will be “{{dlv-country}}.” 
  63. Add another parameter. In the Name field, choose “First Name” from the Dropdown, and in the value field type “dlv-firstName” to recall our previously saved variables. The actual value will be “{{dlv-firstName}}.”
  64. Add another parameter. In the Name field, choose “Last Name” from the Dropdown, and in the value field, type “dlv-lastName” to recall our previously saved variables. The actual value will be “{{dlv-lastName}}.”
  65. Add another parameter. In the Name field, choose “Phone” from the Dropdown, and in the value field, type “dlv-phone” to recall our previously saved variables. The actual value will be “{{dlv-phone}}.”
  66. Add another parameter. In the Name field, choose “State” from the Dropdown, and in the value field, type “dlv-province” to recall our previously saved variables. The actual value will be “{{dlv-province}}.”
  67. Add another parameter. In the Name field, choose “Zip Code” from the Dropdown, and in the value field, type “dlv-zip” to recall our previously saved variables. The actual value will be “{{dlv-zip}}.”
  68. In the Object Properties, change the Property Value for “num_items”. On the property value field, click on the icon and click on “+” to create a new variable.
  69. After opening, click on Variable Configuration and click on Data Layer Variable.
  70. In the Data Layer Variable Name field, type “ecommerce.items.0.quantity”. Now, name the Variable “dlv-ecommerce.items.0.quantity” for your reference and click on save. So, this way, we have populated the Property Value field for “num_items.”
  71. Scroll to “More Settings” in the Event ID field, and type “dlv-ecommerce.transaction_id” to recall our previously saved variables. The actual value will be “{{dlv-ecommerce.transaction_id}}.”
  72. Now, go to your Trigger section, click on it, and select “E-purchase” (previously created).
  73. Save the Tag.

Video: Facebook Pixel Web Tag Setup Conversion API Facebook Shopify via GTM

Setting up the Facebook CAPI Tag GTM Server: Go to Video.

  1. Go to your GTM server dashboard.
  2. Click on Tags from the left side menu.
  3. Click on New, and click on Tag Configuration.
  4. After opening Tag Configuration, choose “Google Analytics: GA4”.
  5. Now, paste your GA-4 ID in the Measurement ID field. (To get the GA4 ID, we must go to our GA4 dashboard and search for “Tracking ID” in the search bar. You should find a Copy button and click on it.)
  6. Check the box “Enable Google Signals.”
  7. In “Redact visitor IP address,” select “true” from the dropdown.
  8. Now, go to your Trigger section, click on it, and then click on the “+” icon to create a new trigger.
  9. Click on Trigger Configuration, choose “Custom,” and click “Some Events.”
  10. In the option below “Some Events,” click on the first field, and from the drop-down, select “Choose Built-In Variable,” then click on “Client Name.”
  11. In the second field, choose “equals” from the drop-down.
  12. In the third field, type “GA4”
  13. Now name the trigger “Client Name-GA4” for your reference and click on save.
  14. Now, name the Tag “GA4” for your reference and save the Tag.
  15. From the left side menu, select “Clients”.
  16. Now, click “GA4,” and within it, click “More Settings.” Scroll to the bottom and check “Migrate from Javascript Managed Client ID.” This will improve the overall tracking. Click on Save.
  17. Again, go back to the Tags, Click on New, and click on Tag Configuration.
  18. After opening Tag Configuration, click on Community Template Gallery.
  19. Now, search for “Facebook Conversions” and click on “Conversions API Tag by Facebook Incubators.”
  20. Add it to the workspace.
  21. Now open the document file we had created previously with all the values from Facebook Pixel.
  22. Go back to the Tag Configuration, and in the Pixel ID field, click on the icon and then click on the “+” to create a new variable.
  23. After opening, click on Variable Configuration and click on Constant.
  24. Copy and paste your Facebook Pixel ID from your document file in the Value field.
  25. Now, name the variable “FB-ID-(YOUR ID)” for your reference and save the variable.
  26. Next, click the API Access Token field icon and the “+” to create a new variable.
  27. After opening, click on Variable Configuration and click on Constant.
  28. Copy and paste your Access Token from your document file in the Value field.
  29. Now, name the variable “FB-Access-Token” for your reference and save the variable.
  30. Next, click the icon and the “+” in the Test Event Code field to create a new variable.
  31. After opening, click on Variable Configuration and click on Lookup Table.
  32. Now, choose Built-In Variable from the drop-down for “Input Variable” and select “Debug Mode.”
  33. In the Lookup Table, click on Add Row.
  34. In the Input field, type “true,” and in the Output field, paste your Test Event Code from the document file.
  35. Now name the variable “LT-FB-Test-Debug-Mode” for your reference and click on save.
  36. Now, go to your Trigger section, click on it, and then click on the “+” icon to create a new trigger.
  37. Click on Trigger Configuration, choose “Custom,” and click “Some Events.”
  38. In the option below “Some Events,” click on the first field, and from the drop-down, select “Choose Built-In Variable,” then click on “Client Name.”
  39. In the second field, choose “equals” from the drop-down.
  40. In the third field, type “GA4”
  41. Now, click on the “+” beside the third field to add a row.
  42. Then click on the first field, select “New Variable” from the drop-down, and click on Variable Configuration.
  43. Choose Lookup Table in Variable Configuration. 
  44. Now, choose {{Event Name}} from the drop-down for “Input Variable.”
  45. Now name the trigger “Client Name-GA4” for your reference and click on save.
  46. In the Lookup Table, click on Add Row.
  47. In the Input field, type “page_view,” in the Output field, type “true.”
  48. Add another row. In the Input field, type “view_item,” in the Output field, type “true.”
  49. Add another row. In the Input field, type “add_to_cart,” in the Output field, type “true.”
  50. Add another row. In the Input field, type “begin_checkout,” in the Output field, type “true.”
  51. Add another row. In the Input field, type “purchase,” in the Output field, type “true.”
  52. Now check the box for “Set Default Value” and the Default Value field type “false.”
  53. Now name the variable “LT-FB-Allow-List” for your reference and click on save.
  54. Once the New Variable is added, we can proceed with our second field.
  55. In the second field, choose “equals” from the drop-down.
  56. In the third field, type “true”
  57. Now, name the trigger “C-FB-Trigger” for your reference and click on save.
  58. Then name the tag “FB-Conversion-API” and save the tag.

Video: Setting up the Facebook Conversion API tag in GTM Server.

Extending the cookie expiration for Facebook & GA4: Go to Video.

  1. Open your Stape.io dashboard.
  2. Click on your GTM container.
  3. Now, click on Power-Ups.
  4. Find and activate “GEO Headers” in the options by clicking the Use button.
  5. Find and activate “User ID” by clicking the Use button.
  6. Find and activate “User Agent Info” by clicking the Use button.
  7. Find and activate “Custom loader” by clicking the Use button.
  8. In “Custom loader,” paste your GTM ID from your GTM dashboard web. (Copy the GTM ID from the header section)
  9. Select “Other” in the Platform field, and click on Generate.
  10. Once you have the code generated, copy the header code. Make sure you are only copying code that is between the opening and closing tags of “<script> CODE TO COPY </script>.”
  11. Go to your Shopify dashboard.
  12. Click on Online Store from the left side menu. 
  13. Now click on the three dots menu beside your current theme section, and from the drop-down, click on Edit code.
  14. Now search for the Snippets folder in the files menu, and open “ecommerce-dataLayer-all-pages.liquid”.
  15. Scroll until you find your GTM code, replace the code with the copied code, and click Save.
  16. Now, go back to your Stape.io and copy the Body code.
  17. Go to your Shopify dashboard, “Edit code,” and “theme.liquid” file, and scroll down till you find your GTM code.
  18. Paste the copied code by replacing the previous code, and click Save.
  19. Now, test if everything is connected. 
  20. Once verified, Go to your GTM server dashboard.
  21. Click on Tags from the left side menu.
  22. Click on New, and click on Tag Configuration.
  23. After opening Tag Configuration, click on “Community Template Gallery.”
  24. Now, search “Cookie Monster” and click “Cookie Monster by gtm-templates-by-simo-ahava.”
  25. Add it to the workspace.
  26. Now, In the Tag Configuration, click on “Add Cookie”.
  27. In the name field, type “_ga”
  28. In the value field, click on the symbol and the “+” icon to create a new variable, then click on the Variable Configuration section and select Cookie Value. In the Cookie Name field, type “_ga, ” name the variable “Cookie-_ga,” and save the variable. 
  29. In the Expiration field, type “50000”. (The expiration value for now is for testing purposes; we’ll change this value once the changes are verified)
  30. Click on Add.
  31. Now, click the Triggering section, “Trigger Configuration,” and choose “Custom” type.
  32. Click on Some Events in the radio button options.
  33. In the first field, choose “Client Name” from the dropdown.
  34. In the second field, choose “equal” from the dropdown.
  35. In the third field, type “GA4”, then click on the “+” icon beside it.
  36. Again, In the first field, choose “Cookie-_ga” from the dropdown.
  37. In the second field, choose “matched RegEx” from the dropdown.
  38. In the third field type, “.*”
  39. Now, name the trigger “C-GA-4-Cookie-Update-Trigger”, and click on Save.
  40. And name the tag “CM-GA-4-Cookie-Update” and save the Tag.
  41. Now, publish all the changes on your GTM dashboard.
  42.  After Publishing, you can verify all the updates and ensure everything works fine.
  43. After verifying, let’s adjust the timeframe.
  44. Go to your GTM server dashboard.
  45. Click on Tags from the left side menu.
  46. Now, open “CM-GA-4-Cookie-Update” in the Tag Configuration, click on the pencil icon and click on Edit in the cookie we have previously added in Step. 27.
  47. In the Expiration field, type “63113852000.” (We have converted 2 years in milliseconds)
  48. Save the tag.
  49. To save time, we will duplicate the same Tag “CM-GA-4-Cookie-Update”.
  50. Let’s make some changes to the duplicated tag.
  51. Change the name of the Tag to “CM-FB-FBP-Cookie-Update.”
  52. In the Tag Configuration, click on the pencil icon and click on Edit in the cookie that we have added previously, and change the Name field to “_fbp” and change the Value field to “{{Cookie-_fbp}}, click on Save.
  53. Now, click the Triggering section, then click on the previous Tag and duplicate it. 
  54. Change the trigger name to “C-FB-FBP-Cookie-Update-Trigger.”
  55. Now, In the conditions table, make changes to the second row.
  56. In the first field, change the “Cookie-_ga” to “LT-FB-Allow-List.” 
  57. In the second field, choose “equals.”
  58. In the third field, type “true,” then click on the “+” icon beside it.
  59. Again, choose “New Variable” from the dropdown in the first field.
  60. Click on the Variable Configuration section and choose “Cookie Value.”
  61. In the Cookie Name field, type “_fbp,” name the variable “Cookie-_fbp,” and click Save.
  62. Once the first field is populated, choose “matches RegEx” in the second field.
  63. In the third field, type “.*”
  64. Save the trigger.
  65. And don’t forget to switch the trigger we’ve just created because we duplicated it.
  66. Save the tag.
  67. Again, we will duplicate the same Tag “CM-FB-FBP-Cookie-Update” to save time.
  68. Let’s make some changes to the duplicated tag.
  69. Change the name of the Tag to “CM-FB-FBC-Cookie-Update.”
  70. In the Tag Configuration, click on the pencil icon and click on Edit in the cookie that we have added previously, and change the Name field to “_fbc” and change the Value field to “{{Cookie-_fbc}}, click on Save.
  71. Now, click the Triggering section, then click on the previous Tag and duplicate it. 
  72. Change the trigger name to “C-FB-FBC-Cookie-Update-Trigger.”
  73. Now, In the conditions table, make changes to the third row.
  74. In the first field, choose “New Variable” from the dropdown.
  75. Click on the Variable Configuration section and choose “Cookie Value.”
  76. In the Cookie Name field, type “_fbc,” name the variable “Cookie-_fbc,” and click Save.
  77. Once the first field is populated, choose “matches RegEx” in the second field.
  78. In the third field, type “.*”.
  79. Save the trigger.
  80. And don’t forget to switch the trigger we’ve just created because we duplicated it.
  81. Save the tag.
  82. Publish the changes.

Video: How to Extend the Cookie Expiration in the Setup Conversion API Facebook Shopify via GTM Server

The Setup Conversion API Facebook Shopify through GTM is Completed

Yeah, we reached the end of the road. There are a few things you need to keep in mind about the setup conversion API Facebook Shopify through GTM:

  • If you change the theme, you need to redo the data layer setup.
  • If you make updates to your themes, they might affect your data layer setup.
  • You will never get 100% accuracy, but with the cookie extension, you will have enough to understand what campaigns, audiences, or ads are performing well.
  • There is always room for improvement in the data layer. Use this as a starting point; if you have a developer, let them help you improve it.
  • You can also use Google Cloud or AWS as a server for your GTM.

Conclusion

I hope you found some value within this setup, and it will help you optimize your campaigns much better. At the same time, this has the potential to help you save more on your ad budget.

As usual, I believe in helping you grow your business and will continue to do my best to help you.

Josipher & the Team.

Get New Insights and Updates in CXO and MM.

Learn more

The GTM Template for Setup Conversion API Facebook Shopify

You can get the GTM-Template-Setup-Conversion-API-Facebook-Shopify here for 50 EUR to help you set up this faster.

You will get lifetime access and any updates or changes to the Template.

Get Your GTM Template