Tracking mp3 file plays on Marketo Landing Page

[Sarah_McConnell]

Hi all,

I have an mp3 podcast file embedded on my landing page using an audio script:

audio controls>

<source src="https://go.synack.com/rs/738-OEX-476/images/Synack Podcast - Executive Lunch - RSA 2019 - Episode 1 with Intro.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

I thought I would be able to track when someone plays the podcast using a link click (tracking the mp3 link) but that doesn't work. Does anyone know of anyway to track if someone clicks play on that mp3 file?

[SanfordWhiteman]

I have an mp3 podcast file embedded on my landing page using an audio script:

<audio> tag actually, not a script. There's no JS in your example.

In fact you need this JS:

document.querySelector("audio").addEventListener("play",function(e){
  Munchkin.munchkinFunction("clickLink",{
    href : this.src
  });
});

[Sarah_McConnell]

Thanks for the response, I am still new to this! So the proper way to have this set up would be:

1. document.querySelector("audio").addEventListener("play",function(e){
2. Munchkin.munchkinFunction("clickLink",{
3. href : https://go.synack.com/rs/738-OEX-476/images/Synack Podcast - Executive Lunch - RSA 2019 - Episode 1 with Intro.mp3
4. });
5. });

?

[SanfordWhiteman]

Er, no... use the exact code I provided (wrapped in a <script> of course).

[Sarah_McConnell]

Ok so I am adding the JS you provided wrapped in <script> on my landing page. Does it need to go in the header, or can it go in the body? Do I need to replace the "href: this.src" with anything? Seems like there needs to be a link or a source there? Additionally, now that this is on the LP, how can I utilize this JS to track who is clicking to play? Is it utilizing the "clicklink" munchkin function? Thanks in advance for your help!

[SanfordWhiteman]

Doesn't matter where you put it.

Do I need to replace the "href: this.src" with anything?

No. The source URL is picked up automatically.

Additionally, now that this is on the LP, how can I utilize this JS to track who is clicking to play? Is it utilizing the "clicklink" munchkin function?

Same way you would track any Clicks Link activity on a page. The code just extends Clicks Link to account for more types of clickable elements.

[Sarah_McConnell]

Thank you!

When I added the script to the page, it added a CDATA to the script:

<center><audio controls="controls">

<source src="https://go.synack.com/rs/738-OEX-476/images/Synack Podcast - Executive Lunch - RSA 2019 - Episode 1 with Intro.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio></center>

<script>// <![CDATA[

document.querySelector("audio").addEventListener("play",function(e){

Munchkin.munchkinFunction("clickLink",{

href : this.src

});

});

// ]]></script>

Am I missing an element that should be there?

[SanfordWhiteman]

The editor adds CDATA because of an ancient tradition. It's useless -- but harmless -- in modern browsers.

[Sarah_McConnell]

Thank you! I have all this in place, however, when I run a smart list of anyone who visited that page and clicked any link, I am still getting 0 people. I have tested it and clicked the play button, and when I go to my activity log, it isn't showing any link click?

[SanfordWhiteman]

Please supply your URL.

[Sarah_McConnell]

Trust Series Podcast: Rebuilding Trust Executive Lunch Panel at RSA

[SanfordWhiteman]

Watch this screen capture and you can see the Click Link events are indeed being sent to Marketo:

Without further information I'd assume your sessions are still anonymous (as opposed to associated with a known lead). If you do a Smart List that's only for associated sessions. A Web Page Activity report for Anonymous visitors (on the Setup tab) reveals anon sessions.

[Sarah_McConnell]

So I pulled hte Web Page Activity Report and I can see my name on the report, but when I go into my Activity Log, it isn't showing a clicked link activity... weird because it is obviously running correctly from your screen share, but I am unable to find that data in Marketo.

[SanfordWhiteman]

But run an Anonymous WPA and compare.

[Sarah_McConnell]

Ok I did this, and still, no one on that list has an activity log that involves a link click, only the web page visit.

Clicked into all these, and none have a "clicklink" activity. So odd.

[SanfordWhiteman · Accepted solution]

OK, please try this:

document.querySelector("audio").addEventListener("play",function(e){  
  Munchkin.munchkinFunction("clickLink",{  
    href : this.currentSrc || this.src
  });  
});

P.S. It's actually better to use synthetic Visit Web Page, not Click Link, for reasons I'll explain in an upcoming blog post, but Click Link will be okay for your case.)

[Sarah_McConnell]

Tried that and tested using my profile and it still has no "clicklink" activity in the activity log. It logs my visit to the page in the activity log each time, but not the clicks on the play button.

[Sarah_McConnell]

This is current code on the LP as it stands:

<center><audio controls="controls">

<source src="https://go.synack.com/rs/738-OEX-476/images/Synack Podcast - Executive Lunch - RSA 2019 - Episode 1 with Intro.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio></center>

<script>// <![CDATA[

// document.querySelector("audio").addEventListener("play",function(e){

Munchkin.munchkinFunction("clickLink",{

href : this.currentSrc || this.src

});

}); >

// ]]></script>

[SanfordWhiteman]

You have a syntax error now, so that's the direct problem.

See the extra comments and a closing > in there?

[Sarah_McConnell]

Ok got that removed and still doesn't seem to be working it's never ending!

[SanfordWhiteman]

Can you see it sending the events as in my GIF above?