Track Clicks on Lightbox image

[Anonymous]

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?

[SanfordWhiteman]

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.

[Anonymous]

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

[Anonymous]

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

[SanfordWhiteman]

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.

[Anonymous]

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?

[SanfordWhiteman]

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>

[Anonymous]

Thanks for the help!

[Anonymous]

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? 

[Anonymous]

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