Challenges Using Analytics in Third-Party Iframes on AMP

[chriskyfung]

Hello everyone!

I've recently been exploring how to use AMP Analytics to track data from third-party iframes within an AMP (Accelerated Mobile Pages) environment. I wanted to start this thread to hopefully get the ball rolling and gather ideas and experiences from all of you.

Background

One of the main goals of AMP is to accelerate webpage loading speed and improve user experience. However, when embedding third-party iframes in AMP pages and wanting to track their data, challenges arise. AMP Analytics offers a framework, but the exact implementation can be tricky.

Current Understanding

The following diagram summarizes my current understanding of how it works:

sequenceDiagram
AMPPage ->> ThirdPartyIframe: Load
ThirdPartyIframe ->> ThirdPartyIframe: Implement window.onNewContextInstance
ThirdPartyIframe ->> AMPAnalytics: Receive context parameter
AMPAnalytics ->> ThirdPartyIframe: Call context.onAnalyticsEvent(callback)
ThirdPartyIframe ->> ThirdPartyIframe: Callback function processes event data
ThirdPartyIframe ->> ThirdPartyIframe: Execute event handling
ThirdPartyIframe ->> AMPAnalytics: Optional: Send response using context.sendResponseToCreative()

Loading

Based on the official examples, I believe that AMP supports the following:

• Implementing window.onNewContextInstance: When a third-party iframe loads, it needs to implement the window.onNewContextInstance function. This function's role is to receive the context parameter from AMP Analytics.
• Calling context.onAnalyticsEvent(callback): AMP Analytics will call context.onAnalyticsEvent(callback), and we need to provide a callback function to process the received event data.
• Data Transmission: I can process event data within the callback function and optionally send a response using context.sendResponseToCreative().

Questions

While I have a basic understanding, I have the following questions:

• Ensuring Data Accuracy: When tracking data from third-party iframes, how can I ensure data accuracy and completeness?
• Different Event Triggers: Besides click events, what other triggering methods are available? According to amp.dev documentation, the amp-analytics component offers triggers like render-start, ini-load, blur, change, scroll, timer, visible, and hidden.
• Best Practices: When using AMP Analytics to track data from third-party iframes, are there any best practices I should follow?

Goal

I hope that through this thread, we can gain a deeper understanding of how AMP Analytics works and create a clear, easy-to-use guide that helps other developers solve similar problems.

I look forward to everyone sharing their experiences and suggestions!