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 
  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 
    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)
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.