Tracking podcast playback events from Apple Podcasts iframe in AEM

[AdrianaCa3]

Hi everyone,

I'm working on an AEM project where we’ve developed a custom “Podcast” component that allows editors to embed podcast content from different platforms, including Spotify, Apple Podcasts, Podigee, and SoundCloud using iframes.

For platforms like SoundCloud and Podigee, I know there are libraries or SDKs available that allow tracking of playback events (such as play, pause and progress milestones) even when embedded via iframe.

However, I’m currently looking for a way to do the same for Apple Podcasts embeds, specifically to capture events like play, pause and playback milestones (25%, 50%, 75%, 100%) and send those events to Adobe Analytics.

From my research, Apple Podcasts embeds (via https://embed.podcasts.apple.com/...) doesn’t expose a public JavaScript API or any event listeners due to cross-origin restrictions.
Still, I’d like to ask:

• Does anyone know of any libraries or workarounds to track user interactions on Apple Podcasts iframes?
• Have you ever implemented something similar within AEM and successfully tracked playback data?

Any suggestions or shared experiences would be really helpful.

Thanks a lot in advance!
Adriana

[AmitVishwakarma]

Hi @AdrianaCa3 ,

Apple does not provide any official JavaScript SDK or postMessage API for their podcast embed player.
Cross-origin iframe security means you cannot hook into the player’s internals.

Directly tracking playback events from the iframe is impossible.
You need a workaround to capture user interactions and approximate playback progress.

Try below workaround:

1. Create Custom Play/Pause Buttons Outside the iframe
  - Hide or cover the default Apple Podcasts player controls (if possible).
  - Provide your own custom UI buttons for Play and Pause in your AEM component.
  - User interacts with these buttons instead of the iframe controls.
2. Track User Interactions on These Custom Controls
  - On Play button click, send a "play" event to Adobe Analytics.
  - On Pause button click, send a "pause" event.
3. Approximate Playback Progress Using Timers
  - Get the podcast duration (from metadata or editorial input).
  - When the user clicks Play, start timers for milestones (e.g., 25%, 50%, 75%, 100%).
  - When each timer fires, send a corresponding progress event to Adobe Analytics.
  - Clear timers if the user clicks Pause.
4. Track iframe Visibility
  - If you can’t implement custom controls, track how long the iframe is visible using Intersection Observer.
  - This gives a rough estimate of engagement but not exact playback events.

Regards,
Amit