Adobe events tracking trough spotify iFrame

[SarahBo2]

Hi,

In my project adobe experience manager as cloud service,
I have an embedded component in which is possible to configure spotify's iFrames. My team and I are trying to track the play,pause,and milestones events of the iframe trough the Web Playback Spotify Sdk but we are not sure it could work. Do you have any information about adobe communicate with spotify?
Does any of you ever tried something similar?

Thank you,

Sarah

[sarav_prakash · Accepted solution]

Yes, you must create an embeddable under the wcmcore embed component. 2 ways to embed spotify sdk: 1) Create embeddable to load iframe ; 2) Create as custom component for additional features functionalities. 

Embeddable:

Step 1: Create spotify embeddable component. Under /apps/project/components/content/embeddables/spotify/spotify.html

<sly data-sly-use.spotify='com.commons.core.models.embeddables.Spotify'>
    <div class='cmp-spotify'
         id='spotify-component-${spotify.audioId @ context = "attribute"}'>
        <iframe allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                height="${spotify.height @ context = 'attribute'}"
                loading="lazy" src="${spotify.source}"
                style="border-radius:12px; border: none;"
                width="100%"></iframe>
    </div>
</sly>

Step 2: Create sling modal. Authors entered audio type like playlist, track, album etc and the spotify track id. Spotify domain was in externalizer. Sling modal just prepared the source url.

Step 3: Enable the spotify embeddable into component policy. 

Authors can add embed component, and choose spotify as embedable and iframe loads. 

Now iframe runs as blackbox, tracking or analytics wont be possible. 

Custom component:

If desired to extend spotify SDK, for more custom functionalities, instead of just running player; you ll need to build a custom component and run spotify SDK as clientside javascript.  

Step 1: In your template head.html, load player 

`<script src="https://sdk.scdn.co/spotify-player.js"></script>`

Step 2: Create a servlet to securely fetch access_token for spotify 

Step 3: Include spotify sdk into package.json of FE project 

`npm install @spotify/web-api-ts-sdk --save`

Step 4: Create spotify clientlib to play upon click of run button 

    window.onSpotifyWebPlaybackSDKReady = () => {
      const token = 'YOUR_ACCESS_TOKEN';
      const player = new Spotify.Player({
        name: 'Web Playback SDK Player',
        getOAuthToken: cb => { cb(token); },
        volume: 0.5
      });
    
      player.addListener('ready', ({ device_id }) => {
        console.log('Ready with Device ID', device_id);
      });
    
      player.connect();
    
      document.getElementById('togglePlay').onclick = function() {
        player.togglePlay();
      };
    };

We did SDK way for Youtube, to download subtitles and add into json+ld SEO metadata. And spotify was embeddable iframe for us. But idea is same, to create custom component and a clientlib for calling SDK.

[SarahBo2]

Hi sarav_prakash,

thank for you help. I just have few more questions:

• In your knowledge, is it possible to use the spotify web player sdk in a commercial site?
• Is it necessary to my site visitors to have a spotify premium account?

Thank you

Sarah

[sarav_prakash]

Hi @SarahBo2 , no, users need not have premium account. So on load of component, the SDK would be loaded with an auth token. The auth token is generated using an enterprise service account. So auth generation service must run at serverside protected. The token is loaded on browser and should run SDK. Once SDK loads successfully, we can finish all our functionalities with SDK help.

[SarahBo2]

Hi sarav_prakas,

thank you for your help, but I still have few more questions:

I already developed an embedding component that is live and in which we configure spotify's iframes. If I decide to implement the spotify sdk, do I have to replace the actual embedding component with another one that do not accept iframes but just spotify tracks' ids or can I however use the iframe with th sdk implementation?

Thank you,
Sarah