Don't have one? Create one ↗
← All courses

Lesson 7 of 15

Data Layer Variables

① Connect your GTM container

Paste your container ID to load it into this page. It only ever runs here.

Advanced: use a specific environment

Real sites rarely push flat values. They push nested objects, grouping a page, a user and a clicked thing into their own little trees. This page does the same: on load it pushed a page_data object with page and user branches inside it.

To pull a value out of a branch you give the Data Layer Variable Name a dotted path like user.plan or cta.id. GTM walks the dots into the pushed object and returns the value at the end, so one variable type reaches any depth.

Goal

Read nested dataLayer values with dotted Data Layer Variables and fire a tag on the cta_click event.

Build it in GTM

  1. Make a Data Layer Variable for a nested key

    Go to Variables in the left sidebar, then under User-Defined Variables click New and choose Data Layer Variable.

    1. In Data Layer Variable Name type page.type, the dotted path is how GTM walks from page_data.page into its type key.
    2. Name it DLV - page.type and Save.
  2. Repeat for the other nested keys

    Make the same kind of variable for user.plan, cta.id and cta.text. Each one is a separate Data Layer Variable with a dotted name, not a single variable reading the whole object.
  3. Create a Custom Event trigger for cta_click

    Triggers → New → Custom Event, set Event name to cta_click. This matches the event the button below pushes, so a tag can read the cta.* values at that moment.
  4. Fire a tag on the trigger

    New tag → Custom HTML, name it Custom HTML - Test and paste <script></script>, set the cta_click trigger as its firing trigger. On the real site this would be a GA4 Event tag sending {{DLV - cta.id}} and {{DLV - cta.text}} as parameters.

Debug in Tag Assistant

Copy this lesson's live URL and paste it into GTM Preview, that is the page Tag Assistant connects to. It has the clickable elements, so this page stays clean for reading.

  1. In your GTM, click Preview.
  2. Paste the live URL above and click Connect.
  3. Interact with the live page and watch your tag fire in Tag Assistant.

What you should expect to see

Click the button and open Tag Assistant's Variables tab: {{DLV - cta.id}} resolves to hero and {{DLV - cta.text}} to Start free trial, the dotted name reached into the nested object. Your tag appears under Tags Fired on the cta_click event.

Verify your container

Built it? Export your container, Admin → Export Container, choose your workspace, then drop the JSON here to check it against this lesson.

Drop your container .json here

or browse · checked in your browser, nothing is uploaded

0 of 15 lessons complete