Using Amplitude with SPA frameworks

🌎 Our Open Source Projects AmplitudeJS
1

Just here for some advice regarding the subject.

I am still working on my discourse integration. Amplitude doesn’t like it I think when the DOM changes happen. e.g when you move away and come back to a page, it doesn’t like Amplitude.init being called again. I got around that, but then I have to call bindNewElements, and still, the waveform thing doesn’t work.

I might be missing something very simple here. How do you guys tackle these things when you use Amplitude with Vue or something similar.

2

Hi @fzngagan,

The way AmplitudeJS is set up is when you need to re-bind the screen, you can call Amplitude.bindNewElements() which it sounds like you are doing. Amplitude.init() will destroy the state or any other configured settings if called again. It’s essentially a re-load.

With the waveforms are they being destroyed or just not generating correctly? And it’s after the .bindNewElements() is called? Just making sure. I think it has something to do with syncing the waveform elements.

I’d love to make a more re-active solution or even a native Vue component. If we can get this resolved I can see what I can do with making a component that handles it seamlessly.

1 Like
3

That would be really nice. As a disclosure, I’m adding the player through a very non-standard way which could be the source of every problem I’m facing. Thanks for giving this a thought.

4

I’ve been trying to think up a solution and might have something. Just a quick question though. When you are calling the Amplitude.playNow() method and passing it as song, how do you have your UI structured? Is it all global level components (shows whatever is playing) or do you manually set the song meta data in the component?

Example process:

  1. Call Amplitude.playNow()
  2. Manually set meta data in an element?

or

  1. Call Amplitude.playNow()
  2. Expect all meta data elements like data-amplitude-song-info to update with the song that you are playing?

I think I might have an idea on how we can make this happen without calling init and just using public facing methods.

1 Like
5

Yeah, that’s a good one. To be completely honest with you, my client needed visualization for the most part and I ended up using wavesurferjs for that . I had little time to try your solution out but I’ll try it some other time when I’m working on similar stuff. Thanks for your time man. :slight_smile:

I had a weird context where I had to run the thing i.e. adding the player itself using a jquery manipulation which might not be the go to way of doing things but that was the only way to do it in my case.

6

No problem! Glad you found a solution that worked for you! I’ll work on getting some of the fixes in the next releases. Let me know if any other Amplitude questions come up!

1 Like