Multi-players loadad by external js

🌎 Our Open Source Projects AmplitudeJS
1

Hello there

I have a particular use case of amplitudejs, and i have somes difficults…

I use the 3.5.2 version

I need to load severals independants players on a page, and i need each player has its one amplitude instance.

You can find a exemple source code here : GitHub - ErnadoO/amplitude-demo

The workflow in details: On one page, our customers add one or severals “tag” like this :

<div class="rwm-podcast-player" data-pid="1eb618ae-c6f7-6172-b48d-f98bdb3bb4ce"></div>

and at the bottom, they need to include a external js file (init.js) from our website. This file include the amplitude js library and find each tag (.rwm-podcast-player) and include an external js file (like podcast-1eb618ae-c6f7-6172-b48d-f98bdb3bb4ce.js) by tag/player in the DOM

This file contains the player html code, the amplitude config with song list, callback events, and many more (the code on my github is very simplified). This file is dynamicaly build and depend of customer configuration (player size, colors, event, etc…) in our backoffice.

My problem is that each Player share the same Amplitude object loaded by the init.js and each call of Amplitude.init() in this files impact all displayed Players.

You can see this side effect here : https://www.erwan-projects.fr/amplitude-demo/ When the second Player is loaded, the first player get his metadata, and a play click launch play on both.

I even tried to initialize Amplitude in the init.js file and each Player file call the addPlaylist() function (with of course data-amplitude-playlist attribute); it’s work well but i can’t choose this solution, becasue each Player has it’s own configuration (custom callback function); i can’t share the same Amplitude instance.

I come here to know if you guys have a solution for create/use an instance of Amplitude by player. I’m not a js developper. If not, maybe add a feature to can specify a DOM target in the settings array (like sugered here : Allow multiple player on same webpage · Issue #189 · serversideup/amplitudejs · GitHub) ?

i would be eternally grateful to you :slight_smile:

2

Hi @ErnadoO ,

As of right now, AmplitudeJS doesn’t support separate Amplitude instances per page. However, I will be adding that soon.

In the mean time, you should be able to apply data-attr-song-index to the element and you can control each song individually: Interactive Elements - AmplitudeJS Documentation. I’d also update AmplitudeJS to the newest version since 3.5.2 is older.

Here’s an example of how to support multiple songs: Multiple Songs Example - AmplitudeJS Documentation

Hope this helps and let me know if I’m on the right track.

3

Hello @danpastori

My mistake, i use the 5.3.2 version…

I can’t use data-attr-song-index becasue each Player are independents and have severals songs attached, so we can said each Player have his own playlist; and the data-amplitude-playlist option as i said is not applicable neither (i need to specify specifics callback functions per Player)

So, I think i will wait for the multi instances solution

Thank you

4

Hi @danpastori

Almost two years later, what is the news about the possibility of having separate Amplitude instances per page ?

Thanks :smiley: