Using Data Layer with Google Tag Manager

Objective

To understand and implement the Data Layer in your website so that you can push custom data (like form input, user info, or transaction value) into Google Tag Manager, and use that data in your tags, triggers, or GA4 events.

What is the Data Layer?

The Data Layer is a JavaScript object that passes dynamic information from your website to Google Tag Manager. GTM automatically listens to this object so you can access its values.

Think of it as a “data inbox” GTM reads from.

Step 1: Understand the Basic Data Layer Format

Here’s what a simple dataLayer.push() looks like:

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

  event: “form_submission”,

  user_email: “jane@example.com”,

  form_type: “newsletter”

});

• event: Triggers GTM to listen for a named event
• Other keys (e.g. user_email, form_type) are custom values you can access later

Step 2: Add Data Layer Code to Your Website

Insert the dataLayer.push() inside your website’s code at the moment something happens, like:

• Form successfully submitted
• Purchase completed
• User logged in

Example: After a form submission

// After form validation & submission success

window.dataLayer.push({

  event: “form_submitted”,

  user_role: “marketer”,

  resource_type: “whitepaper”

});

Step 3: Create a Trigger in GTM for the Custom Event

1. Go to Triggers → Click New
2. Name it: Custom – form_submitted
3. Choose Trigger Type → Custom Event
4. Event Name: form_submitted
5. Choose: All Custom Events
6. Click Save

Step 4: Create Data Layer Variables in GTM

1. Go to Variables → Click New
2. Name it: DLV – user_role
3. Variable Type: Data Layer Variable
4. Data Layer Variable Name: user_role
5. Save

🔁 Repeat for any other keys like resource_type, user_email, transaction_value, etc.

Step 5: Create a GA4 Event Tag Using the Data

1. Go to Tags → Click New
2. Name it: GA4 – form_submitted
3. Tag Type: GA4 Event
4. Configuration Tag: Select your GA4 config
5. Event Name: form_submitted
6. Event Parameters:

Parameter Name Value

user_role             {{DLV – user_role}}

resource_type {{DLV – resource_type}}

7. Triggering → Select: Custom – form_submitted

8. Save

Step 6: Preview and Test

1. Click Preview in GTM
2. Go to your website and perform the tracked action (e.g., submit the form)
3. In Tag Assistant:

• Check for the event form_submitted
• Confirm that your tag fired
• See if your custom variables appear correctly

Note

• Always ensure dataLayer.push() happens after GTM loads
• Use meaningful event names like purchase_complete, video_viewed, and signup_success
• You can push to dataLayer multiple times — GTM will catch every event