Enable touch events, tracking zoom-in events

General questions
1

I have an image gallery with thumbnails that can be scrolled and clicked to expand. That click-to-expand can be tracked. However once the image is full screen, it can be zoomed in (using http://photoswipe.com) and the zooming is not tracked. How can that be done? I’m using this code.

<a href="img/screencapture.png" itemprop="contentUrl" data-track-content data-content-name="Image1">
     <img src="img/thumbnails/screencapture.png" itemprop="thumbnail" data-track-content data-content-name="Image1 thumb" />
</a>
2

Not sure as I do not know photoswipe but if your interaction is happening outside of your website which may be the case here, then you need to look at photoswipe API in order to send interactions from there to your Piwik server.

3

Thanks @RonanChardonneau!

Looking at the photoswipe API documentation, it mentions this, how can that be included?

    // Opening zoom in animation starting
    pswp.listen('initialZoomIn', function() { });

    // Opening zoom in animation finished
    pswp.listen('initialZoomInEnd', function() { });

    // Closing zoom out animation started
    pswp.listen('initialZoomOut', function() { });

    // Closing zoom out animation finished
    pswp.listen('initialZoomOutEnd', function() { });
4

Hi,

@RonanChardonneau photoswipe is no external service, but just a javascript library which shows a nice gallery (example)

@Maxi, you may look into Event Tracking. That way you can track every time this event happens.
e.g.

pswp.listen('initialZoom', function() {
    _paq.push(['trackEvent', 'Gallery', 'Interaction', 'Open']); // you can set category, action and name however you want
});
5

Thanks @Lukas, would that go into the Piwik tracking code?

6

You can put it into your application code to the Reston photoswipe specific JavaScript.
It doesn’t even matter if it is executed before or after piwik has initialised.

7

Thanks @Lukas. Sorry, do you mean in this file? Anywhere?

8

you don’t need to modify an existing file. Just add is into the JavaScript of the page (where the pswp variable is defined)

9

Sorry to be a pain @Lukas, on this example page which mirrors my setup, would that be there?

10

Hi,

In this line the photoswipe object gets created and assigned to the variable gallery.

So you can put the event listeners in the following line:

gallery.listen('initialZoom', function() {
    _paq.push(['trackEvent', 'Gallery', 'Interaction', 'Open']); // you can set category, action and name however you want
});
gallery.listen('initialZoomOut', function() {
    _paq.push(['trackEvent', 'Gallery', 'Interaction', 'Close']); // you can set category, action and name however you want
});

Your solution from “Track both Show and Hide events” doesn’t track photoswipe interaction, but just when a user clicks on the link.

11

Thank you @Lukas, to confirm, it’s right after that line, correct?

Like so…

// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
gallery.listen('initialZoomIn', function() {
    _paq.push(['trackEvent', 'Gallery', 'Interaction', 'Open']); 
});
gallery.listen('initialZoomOut', function() {
    _paq.push(['trackEvent', 'Gallery', 'Interaction', 'Close']); 
});
};
1 Like
12

That should work (in theory).