Google Tag Manager – Data Layers

The data layer is used to transfer data between the web and third-party applications [e.g. Google Tag Manager]. In the data layer, information [data] about product, transactions, customers or marketing campaigns. 

This guide will help you to setup correctly each of the events / data layers mentioned in the list below. 

Here are some example screenshots showing some data statistics which you are about to activate within this integrtion guide: 

Google Analytics – Purchase journey

Google Analytics – Checkout journey

Described list of Data Layers (Events) and their params: 

add_payment_info = when a user submits their payment information

• • coupon
  • currency
  • items
  • payment_type
  • value

add_shipping_info = when a user submits their shipping information

• coupon
• currency
• items
• shipping_tier
• value

add_to_cart = when a user adds items to a cart

• currency
• items
• value

begin_checkout = when a user begins the checkout

• coupon
• currency
• items
• value

login = when a user logs in

• method

purchase = when items are purchased by a user

• affiliation
• coupon
• currency
• items
• transaction_id
• shipping
• tax
• value

remove_from_cart = when a user removes items from a cart

• currency
• items
• value

search = when a user searches your content

• search_term

select_item = when an item is selected from a list

• items
• item_list_name
• item_list_id

share = when a user has shared content

• content_type
• item_id

sign_up = when a user has signed up

• method

view_cart = when a user views their cart

• currency
• items
• value

view_item = when a user views an item

• currency
• items
• value

view_item_list = when a user sees a list of items/offerings

• items
• item_list_name
• item_list_id

Integration within your Google service account:

<script>
var gaCode   = 'G-XXXXXXXXXX'; // Replace with your GA4 Measure ID
var gtagCode = 'GTM-YYYYYYYY'; // Replace with your GTM Measure ID
(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',gtagCode);
</script>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-YYYYYYYY"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
// In the code above you have to replace: G-YYYYYYYY with your GTM ID.

Add All Basic Data Layers: 

// Google Analytics users
<script src="https://shr.promotron.com/js/events.min.js"></script>

// Google Tag Manager users
<script src="https://shr.promotron.com/js/events_push.min.js"></script>

<script>
var p = '{{TRANSACTION_ID}}';
var u = '{{TRANSACTION_AFFILIATION}}';
var r = {{TRANSACTION_REVENUE}};
var ch = {{TRANSACTION_TAX}};
var a = {{TRANSACTION_SHIPPING}};
var se = {{GOOGLE_ANALYTICS_ECOMMERCE_ITEMS_ARRAY}};
orderConfirmationPage(p,u,r,ch,a,se);
</script>

Form Start & Submit: 

<script>
runEvent('form_submit');
</script>

<script>
runEvent('sign_up','method','webform');
</script>

Sign Up & Login: 

<script>
runEvent('form_start');
</script>

<script>
runEvent('form_submit');
</script>

<script>
runEvent('form_start');
</script>

Almost done

If you would like to test the GTM integration, you can use Google Tag Assistent tool. 

On the screenshot below you can see correctly set external scripts.