The following example sends an event to Google Analytics whenever a product link or product widget is activated. The publication ID, product ID, and current page spread are included in the event. If you want to use a different statistics tracker, just switch out the Google Analytics portion of the code with code for your tracker.
A statistics event is also registered with the viewer itself, which allows the product view to be displayed in the Statistics section of the Zmags Publicator.
<!DOCTYPE html> <html> <head> <title>Log Product Statistics Example</title> <script type="text/javascript" src="http://api.viewer.zmags.com/viewer/viewer.js"></script> <script> // Initialize Google Analytics var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); // Fill in your account key here. _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); // Event handler for product link and widget activations function productActivateHandler(event) { // Query the viewer for the publication ID (asynchronous) event.target.getPublicationID(function (getPublicationIDData) { // Query the viewer for the current page spread (asynchronous) event.target.getCurrentPages(function (getCurrentPagesData) { // Send the event to Google Analytics // This example includes the publication ID and product ID in the category and the current pages in the label _gaq.push(['_trackEvent', 'product/' + getPublicationIDData.publicationID + '/' + event.product.product_id, 'viewed', 'PageSpread=' + getCurrentPagesData.firstPage + '-' + getCurrentPagesData.lastPage]); }); }); // Record a product view to be shown in the Zmags Publicator event.target.registerProductDetailsViewed(event.product); } // Embed the Zmags viewer var viewer = new com.zmags.api.Viewer(); viewer.setPublicationID("XXXXXXXX"); // Fill in publication ID here. viewer.setParentElementID("myViewerContent"); viewer.oncurrentpageschange = function(event){ productActivateHandler(event); } viewer.onproductlinkactivate = function(event){ productActivateHandler(event); } viewer.onproductwidgetactivate = function(event){ productActivateHandler(event); } viewer.show(); </script> </head> <body> <div id="myViewerContent" style="width:800px; height:600px;"></div> </body> </html>
To use the code above, copy the entire example into an HTML file, fill in the red text with your own information, save the file, and place it on your website. Your publication ID can be found by clicking on your publication's name in the "All Publications" list while logged into the Zmags Publicator.
To retrieve your Google Analytics account key, do the following:
1) On the Google Analytics website, click the Admin tab in the top-right.
2) Find the correct Account and Property, select Profile, click Profile Settings.
3) You're looking for the "Web Property ID" under the "Profile Settings" screen.
Comments
0 comments
Please sign in to leave a comment.