How to — basic start for Google Tag Manager in Angular


Okay, first thing to know is I’m not very much deep in this. So I’m gonna explain in a very simple way.

I’m just newbie for everything, actually.

Google Tag Manager in Angular (1.x)

A bit more about my Angular Website — it’s an e-commerce site so we will focus on a Purchase Function.

Let’s say you want to send Product Details over Data Layer (GTM) to show in Facebook Pixel

A) Put Code in Angular

  1. Create function 
    pushGtmProductPurchase();
  2. Declare Data Layer service
     — var dataLayer = ……
  3. Packing object, all you want to send 
    — in attributes{}
  4. Do this function when customer purchased

B) Get data in GTM

First to know:

Variables = var for data we’re sending from website
Triggers = a same-name event (in your code), will be fired when your function called
Tag = external script (such as Facebook Pixel, Google Analytics Event)
  1. Create a Variable 
    attributes.product.id 
    Same as we packed it in code. You can create var as many as you use.

2. Create Trigger 
— ngProductPurchase 
Detect event by name, so It needs to be the same name.

3. Create a Tag 
PX Product Purchase (Facebook Pixel)
In HTML box we have Facebook Pixel script (with data we want)
and
In Triggering we choose ngProductPurchase


All this means:

User (click) Purchased > Function push Data > GTM Trigger Event > Tag do Facebook Pixel Script

Feel free to leave questions, or any suggestion will be very appreciated.

I know you’re confusing.

Hahaha

;)