This post originally appears here.
SoundCloud provides an incredible audio hosting platform, with rich analytics and functionality for everything from aspiring indie rock acts, to EDM artists at the top of the music industry, to storytelling podcasts. Along with the incredible native functionality of the platform comes a world-class API program to move your data and track listening behavior. This is especially useful for podcasters, and can allow you to correlate specific listening actions, like plays, pauses, and shares to specific content in the script and the audio. Today we'll take a look at leveraging SoundCloud's widget API to send and track these activities in Marketo. The pattern we'll be using may seem familiar if you've read our post on tracking YouTube video views.
First let's look at generating a Munchkin activity which will be recorded to a lead's activity log in Marketo. At it's most basic, we make a call to Munchkin.munchkinFunction and pass "visitWebPage" as the first argument. This will log a Visits Web Page activity with Marketo, and record any arbitrary URL and Query String data which we pass to the method. The second argument accepts a JavaScript object with our data, which has two members, "url," and"params," both strings. The url member corresponds to the Web Page of the activity in Marketo, while params corresponds to the Querystring. For our purposes, we'll use the url as an identifier for SoundCloud related actions, "soundCloudInteraction," while params will contain additional data about the particular activity. Here's the function we'll be using to track each action:
var trackActivity = function(action){ //set action param to be the string passed to the function var qs = "action=" + action; //use getCurrentSound callback to get the name of the current track soundCloudMunchkin.widget.getCurrentSound(function(currentSound){ //add it to our querystring qs = qs + "&sound=" + currentSound.title; //use the getPosition callback to get the position of the track in ms soundCloudMunchkin.widget.getPosition(function(position){ //add it to the querystring qs = qs + "&position=" + position; //assemble our data object for the munchkin activity var dataObject = { "url": "soundCloudInteraction", "params": qs } //call the munchkinFunction to submit the activity Munchkin.munchkinFunction("visitWebPage", dataObject); }); }); }Since the standard SoundCloud widget is embedded in an iframe, the widget uses post messages to communicate and callbacks need to be used to obtain data, as you can see with the currentSound and getPosition methods.
The SoundCloud widget API provides a set of JavaScript callbacks that we can use to respond to individual events in the player and submit these to Marketo. The ones that we're interested are to what and how long the user listens, and interactions that they make with the player, so we're looking at the following events:
- PLAY
- PAUSE
- FINISH
- SEEK
- CLICK_DOWNLOAD
- CLICK_BUY
- OPEN_SHARE_PANEL
We'll also need to use the bind() method from the widget to add callbacks to each of these events. Let's look at one example:
widget.bind(SC.Widget.Events.PLAY, function(){ soundCloudMunchkin.trackPlay(); });This will make it so that whenever a track is played, we'll fire the trackPlay method to send an event to Marketo with data about the current track. You can find the full script here: https://gist.github.com/kelkingtron/6750bb07c1397d93d9c7#file-soundcloudmunchkin-js the soundCloudMunchkin object has an init method, which accepts a SoundCloud widget object as it's only argument, which binds the tracking methods to the relevant callbacks, and will set up your widget to track activity down to Marketo. Your page will need to have your Munchkin code loaded, as well as the SoundCloud API library. You'll also need to initialize everything, in addition to embedding your actual SoundCloud widget:
window.onload=function(){ var iframe = document.getElementById(iframeId); if(iframe) { widget = SC.Widget(iframe); soundCloudMunchkin.init(widget); }; };Check out a live demo here, and happy tracking!
.png)