Track Clicks on Lightbox image

Highlighted
Anonymous
Not applicable

Track Clicks on Lightbox image

We have some lightbox images that pop up on our web product pages (non-Marketo landing pages).  I'd like to be able to track clicks on these images.  Is it just a matter of adding the image to the design studio to generate a Marketo link to it, and use that in our webpage lightbox?

9 REPLIES 9
Highlighted
Level 10 - Community Moderator

Re: Track Clicks on Lightbox image

No, adding to Design Studio won't make a difference.

Are you running Munchkin on your non-Marketo LPs? (You definitely should be.) If so, the Click Link events may already be logged.  If they're not logging, a little change to the way the links are written will usually fix it.  Pls post a sample URL so we can look at it.

Highlighted
Anonymous
Not applicable

Re: Track Clicks on Lightbox image

PowerSuite - about half way down that page is a lightbox pop up with our PowerSuite plan image.

Highlighted
Anonymous
Not applicable

Re: Track Clicks on Lightbox image

Are you able to take a look at the link I sent?

Highlighted
Level 10 - Community Moderator

Re: Track Clicks on Lightbox image

Sorry, lost track of this.  Yes, here's a simple fix. Add the Munchkin clickLink event.

<button onclick="Munchkin.munchkinFunction('clickLink',{href:this.querySelector('IMG').src})" data-toggle="modal" class="btn btn-info btn-lg" style="border: 0; padding: 0;" type="button" data-target="#myModal1">

<img src="/images/powersuite-chart/powersuite-plans.jpg" border="0">

</button>

It would be better to attach event listeners to all <BUTTON> tags with JS, but this shows you how to get it working.

Highlighted
Anonymous
Not applicable

Re: Track Clicks on Lightbox image

Thank you - do we just add this code to all pages?  Or just the pages with a lightbox like this that we want to track clicks on?

Highlighted
Level 10 - Community Moderator

Re: Track Clicks on Lightbox image

Well, here I'm adding directly to the <BUTTON> tags that you're (quite appropriately!) using to launch the lightboxes.  So this would have to be added to every button you wanted to track.

A more maintainable way would be to include this script on every page, which will attach to the relevant <BUTTON>s if they exist:

<script>

document.addEventListener('DOMContentLoaded', function(e) {

  var modalButtonEls = document.querySelectorAll('BUTTON[data-toggle="modal"]');

  Array.prototype.forEach.call(modalButtonEls,function(el){

     el.addEventListener('click',function(e){

         Munchkin.munchkinFunction('clickLink',{href:this.querySelector('IMG').src});

     });

  });

});

</script>

Highlighted
Anonymous
Not applicable

Re: Track Clicks on Lightbox image

Thanks for the help!

Highlighted
Anonymous
Not applicable

Re: Track Clicks on Lightbox image

OK - one more question related to this.  I just want to confirm that I know how to actually track the clicks once the code has been added to the page.  It looks like I can just create a smart campaign with the smart list set to "clicks link on web page" with the link to the image on the page, and then add to a list.  Is that how you would do it? 

Highlighted
Anonymous
Not applicable

Re: Track Clicks on Lightbox image

Yes, Lisa.

You can use that smart list definition to check for the clicks on the buttons coded as Sanford have suggested.

(url of the images)

Rajesh