I2I: Trinity Audio Player extension

[mandelbroo]

Summary

Trinity Audio proposes a component to enable publishers to audiofy their content using our cloud-hosted audio player.
To use the component, it is required to have an account with Trinity Audio. Registration is through our site (https://trinityaudio.ai/)

Design document

https://docs.google.com/document/d/1TAGQQiWfP1eMDQQTKfngddghLX4b7kQkSBtbRf2RYR4/edit?usp=sharing

Motivation

Trinity Audio allows textual content creators the option to distribute and interact with their readers using audio.
By doing so, it allows users to enjoy the high quality content they are already consuming in times when they couldn't before. As many of our publishers use AMP for their mobile content, creating an AMP component will allow them easy integration.
Using a native AMP component enables the component to trigger Analytics events so that publishers can track user interactions with the player. These events can then be collected by an amp-analytics component which sends it to the publisher’s analytics platform of choice.

[alanorozco]

Thanks for your I2I.

The design doc could improve by adding details about implementation: how it changes the document, what it loads, etc.

cc @micajuine-ho for analytics API.

[mandelbroo]

Thanks for the quick feedback!
I'll let you know when the design doc is updated.

[mandelbroo]

@alanorozco we've updated the design doc. Let me know if we can improve it a bit more.

[micajuine-ho]

@mandelbroo I've reviewed your doc. A few questions:

1. It seems that TRINITY_TTS would be a custom event triggered by the Trinity Audio Player extension. Would this event be dispatched from the extension itself or the iframe?
2. Are we only allowing 1 Trinity Audio Player element on each page? If so, then I would imagine you don't need a selector in the analytics config.
3. What is the TRINITY_TTS event getting triggered on i.e. iframe interaction? button click within the iframe? Either way, we should rename TRINITY_TTS to be something more descriptive and follow the format of amp custom events, perhaps something like amp-trinity-tts-active (example custom event name)
4. Where are these custom variables defined? By the publisher or are we by the extension?

         "duration": "${duration}", // for contentStarted event
         "src": "${src}",           // for contentStarted event
         "from": "${from}",         // for scrubbing event
         "to": "${to}"              // for scrubbing event

[alanorozco]

perhaps something like amp-trinity-tts-active

If we already have a similar signal, like active, we should use that instead and use the current selector scheme to differentiate.

[alanorozco]

@mandelbroo

• Please specify in your AMP doc how the iframe is constructed. Does it have a postMessage interface? Is it simply a URL?
• I saw a previous PR that required 3rd party scripts. Is this the case for this I2I?

[mandelbroo]

@micajuine-ho thanks for the review!

1. It seems that TRINITY_TTS would be a custom event triggered by the Trinity Audio Player extension. Would this event be dispatched from the extension itself or the iframe?

It will be dispatched from an iframe and re-dispatched by the extension so it is accessible by the analytics component.

2. Are we only allowing 1 Trinity Audio Player element on each page? If so, then I would imagine you don't need a selector in the analytics config.

While it’s not common, we do have several publishers with multiple players per page. We need to enable the same for AMP.

3. What is the TRINITY_TTS event getting triggered on i.e. iframe interaction? button click within the iframe?

The component will trigger multiple events under the same event name with different payloads, both on user interaction, as well as progress and other internal events that the publishers would like to monitor. It's made for more convenient listening for events as well as matches how the publisher listens to these events in the web component

Either way, we should rename TRINITY_TTS to be something more descriptive and follow the format of amp custom events, perhaps something like amp-trinity-tts-active (example custom event name)

Sure. We can rename it to amp-trinity-tts-event.
We would like to have a single trigger handler for multiple player events:

4. Where are these custom variables defined? By the publisher or are we by the extension?

         "duration": "${duration}", // for contentStarted event
         "src": "${src}",           // for contentStarted event
         "from": "${from}",         // for scrubbing event
         "to": "${to}"              // for scrubbing event

This is additional data that some events carry, adding additional context. Depending on the event type, e.g. playerReady, click, scrubbing, contentStarted, etc. They are defined by the extension (by the player). And we would like to be able to change/extend them without updating the extension.

[mandelbroo]

@alanorozco

• Please specify in your AMP doc how the iframe is constructed. Does it have a postMessage interface? Is it simply a URL?

Not exactly sure what do you mean by “simply a URL”.
The extension will build the iframe having an src to the HTML page with the player. The player will be firing postMessages to the parent so the extension could listen to them and send via triggerAnalyticsEvent with the appropriate payload shape.

You can review the flow in our draft PR https://github.com/TrinityAudioSDK/amphtml/pull/1

• I saw a previous PR that required 3rd party scripts. Is this the case for this I2I?

Yes, we saw your comment and removed these scripts from the page.

[micajuine-ho]

This is additional data that some events carry, adding additional context. Depending on the event type, e.g. playerReady, click, scrubbing, contentStarted, etc. They are defined by the extension (by the player). And we would like to be able to change/extend them without updating the extension.

Would these variables be similar to the video analytics variables we expose? https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md#common-variables

[mandelbroo]

Would these variables be similar to the video analytics variables we expose? https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md#common-variables

No, I can see only a match with duration. The mentioned "duration", "src", "from" and "to" are the all variables we'll support so far.

[micajuine-ho]

Sorry I meant similar in the sense that they are exposed by the element itself. I guess the answer here is yes.