SOLVED

Tracking mp3 file plays on Marketo Landing Page

Go to solution
Sarah_McConnell
Level 2

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?

1 ACCEPTED SOLUTION
SanfordWhiteman
Level 10 - Community Moderator

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.)

View solution in original post

29 REPLIES 29
SanfordWhiteman
Level 10 - Community Moderator

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
Level 2

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
Level 10 - Community Moderator

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

Sarah_McConnell
Level 2

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
Level 10 - Community Moderator

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
Level 2

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
Level 10 - Community Moderator

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

Sarah_McConnell
Level 2

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
Level 10 - Community Moderator

Please supply your URL.

Sarah_McConnell
Level 2
SanfordWhiteman
Level 10 - Community Moderator

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

audio_events.gif

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
Level 2

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.

Screen Shot 2019-05-02 at 12.15.57 PM.png

Screen Shot 2019-05-02 at 12.16.23 PM.png

SanfordWhiteman
Level 10 - Community Moderator

But run an Anonymous WPA and compare.

Sarah_McConnell
Level 2

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.

Screen Shot 2019-05-02 at 1.19.42 PM.png

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

SanfordWhiteman
Level 10 - Community Moderator

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
Level 2

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
Level 2

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
Level 10 - Community Moderator

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

pastedImage_2.png

pastedImage_1.png

See the extra comments and a closing > in there?

Sarah_McConnell
Level 2

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

SanfordWhiteman
Level 10 - Community Moderator

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