How to Track Iframes Using Adobe Analytics: A Complete Guide

The Challenge of Iframe Tracking

Embedding an iframe on your website is convenient, but it presents a major challenge for tracking. By default, your Web Analytics tag (Google Analytics, Adobe Analytics, etc.) cannot “see” what’s happening inside the iframe.

The main reason for this is a crucial security measure called the Same-Origin Policy. This policy prevents a script on one web page from accessing data on another web page if they do not share the same origin (same protocol, domain, and port).

To get around this, we need to set up an explicit communication channel between the parent page and the iframe. The most robust and secure solution is the postMessage API.

---

Step 1: The Parent Page Code (The Container)

The parent page must listen for messages sent by the iframe. It’s the parent page’s job to receive the data and then send it to Adobe Analytics.

In your JavaScript code, add an “event listener” to the window object:

JavaScript

window.addEventListener('message', (event) => {
  // Optional but highly recommended for security
  // Always verify the message's origin!
  if (event.origin !== "https://your-iframe-domain.com") {
    return;
  }

  // If the message is valid, process the data
  const iframeData = event.data;

  // Check that the data contains the expected event
  if (iframeData.event === 'iframe_interaction') {
    // Push data to the Data Layer
    digitalData.page.pageInfo.pageName = iframeData.pageName;
    digitalData.events.push({
      eventInfo: {
        eventName: 'iframe_interaction',
        iframeAction: iframeData.action,
        iframeValue: iframeData.value
      }
    });

    // Send the request to Adobe Analytics
    // Make sure the Data Layer is properly mapped to your variables
    s.t();
  }
}, false);

Code Explanation:

• window.addEventListener('message', ...): We put the parent page in “listening” mode for any incoming messages.
• if (event.origin !== ...): Extremely important! We verify that the message comes from a trusted source to prevent malicious code injection.
• digitalData.events.push(...): We enrich the Data Layer (in the case of Adobe Analytics, often called digitalData) with the information received from the iframe.
• s.t(): We trigger the Adobe Analytics call (s.t() is the standard method for sending a “page view” type of call).

---

Step 2: The Iframe Code (The Content)

The iframe needs to send a message to the parent page whenever a trackable event occurs (a button click, a form submission, etc.).

In the JavaScript code of the page embedded in the iframe:

const sendDataToParent = (action, value) => {
  const data = {
    event: 'iframe_interaction',
    action: action,
    value: value
  };

  // Send the message to the parent page
  window.parent.postMessage(data, "https://your-parent-domain.com");
};

// Example: Send a message when a button is clicked
document.getElementById('button-in-iframe').addEventListener('click', () => {
  sendDataToParent('click', 'button_name');
});

// Example: Send a message when a form is submitted
document.getElementById('form-in-iframe').addEventListener('submit', () => {
  sendDataToParent('submit', 'contact_form');
});

Code Explanation:

• window.parent.postMessage(...): This is the function that sends the message. window.parent refers to the parent page’s window.
• data: This is the object you’re sending, which contains the relevant information for tracking.
• "https://your-parent-domain.com": Very important! This is the parent page’s domain. The iframe will only send the message to this URL, which ensures security.

---

Conclusion

Tracking an iframe is not impossible; it simply requires a different approach. By using the postMessage API, you establish a secure and reliable two-way communication between the parent page and the embedded content. This allows you to retrieve crucial information and integrate it into your Adobe Analytics tagging plan for complete and accurate data analysis.