'Google Tag Manager dataLayer within iframes

I'm wondering if it's possible to 'sync' the dataLayer between an iframe and it's parent page.

The situation:

  1. I have a parent page with a GTM container and a hardcoded dataLayer.
  2. In that parent page I have an iframe with the same GTM container.

What I want to do is read the dataLayer in the parent from the iframe, ideally through the Tag Manager (Macros). The variable can be updated from the parent page, but the iframe should only read the data.

Is this possible? Google is pretty hazy about the issue and I can't really find a decent answer.

iframegoogle-tag-managerdata-layer


Solution 1:[1]

Tracking across IFRAMEs with Google Tag Manager

I would suggest a different solution:

  1. parent page with GTM container
  2. datalayer events inside the IFRAME page
  3. only one GTM container per page

for pushing use the parent method:

parent.dataLayer.push({'event':'EVENT_NAME', 'var2':'ANOTHER_VARIABLE'});

Let me know if it worked for you.

Solution 2:[2]

There are multiples way to trigger GTM from iframe, but I have just found solution,

You just need to have function in parrent that send datalayer to gtm, for instance

const gtmCustom = (event, elementId) => {
  const dataLayer =  window.dataLayer ?? []
  dataLayer.push({
    event: event,
    gtm.elementId: elementId
  })
}

and u just need to call that function inside your iframe

gtmCustom('gtm.click','gtmElementId')

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MasterAM
Solution 2 Rian Iregho

Related Questions