Synology Photostation add Google Analytics to shared album

content_security_policy.php

<?php

// beware -- this will make you photostation less secure -- beware 
// file: /volume1/\@appstore/PhotoStation/photo/cms/content_security_policy.php
// starting with Photostation 7 (PHP7) the new file to edit is:  
// file: /volume1/\@appstore/PhotoStation/photo/include/content_security_policy.php
// rest is the same

// search for script-src
// add 'unsafe-inline' 

// search for style-src
// add 'unsafe-inline' 

// search for https://*.google.com
// add https://*.googletagmanager.com

// should look like this:

$rule .=" script-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.synology.com https://*.google.com https://*.googletagmanager.com https://*.googleapis.com https://dme0ih8comzn4.cloudfront.net/js/feather.js feather.aviary.com http://featherservices.aviary.com *.google-analytics.com https://dme0ih8comzn4.cloudfront.net ;";
$rule .=" style-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.googleapis.com http://feather.aviary.com https://dme0ih8comzn4.cloudfront.net;";

share.php

<!-- file: /volume1/\@appstore/PhotoStation/photo/share.php -->
<!-- add before /head //-->
    <link rel="shortcut icon" href="/photo/favicon.ico">

<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- 
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXX-X');
</script>
-->

	<script type="text/javascript">
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
		
	   	/* change to google analytics */
		ga('create', 'UA-XXXXXX-X', 'auto');
		ga('send', 'pageview');
	</script>
	
	<script type="text/javascript">
	
		/* 
		what is does..
		regulary check for new thumbnails
		if thumbnail was found, check if it has an event listener alread
		if no eventlistener, add analytics event
		using class of scroller thumbnails to serach for thumbid attribute and get title from there
		*/
		
		function addAnalyticsEvent(el, title, action) {
			el.addEventListener('click', function(event) {
				/* add open event to image in table */
				if (typeof ga !== 'undefined') {
                    			ga('send', 'event', '<?php echo addslashes($SHARE_DATA['title']); ?>', title, action);
                		}
			});
			el.classList.add('hasAnalyticsEvent');
		}
		
		function waitforThumbs() {
		
			/* check if overall view is available (waiting for password */
			if(document.querySelectorAll("div.share-view").length > 0 ) {
				if(document.querySelectorAll("div.thumb-wrap:not(.hasAnalyticsEvent)").length > 0) {					
					document.querySelectorAll("div.thumb-wrap:not(.hasAnalyticsEvent)").forEach(function(el) {
						addAnalyticsEvent(el, el.getAttribute('title'), 'open on thumb image');
					});
				}
				
				if(document.querySelectorAll("div.thumb-scroller-div:not(.hasAnalyticsEvent)").length > 0) {
					document.querySelectorAll("div.thumb-scroller-div:not(.hasAnalyticsEvent)").forEach(function(el) {
						var img = el.querySelector("img.thumb-scroller-img");
						var classes = img.classList.value;
						/* 
						e.g.: thumb-scroller-img thumb-scroller-img-photo_444_4444
						we need: photo_4444_444
						*/
						var thumbid = classes.replace(/thumb\-scroller\-img thumb\-scroller\-img\-/i, '');
						
						/*
						no go search for thumbid="photo_444_444"
						*/
						img = document.querySelector('div.thumb-wrap img[thumbid="'+thumbid+'"]');

						/* go up until element with image name comes up */
						if(img && img.parentNode && img.parentNode.parentNode && img.parentNode.parentNode.parentNode) {
							img = img.parentNode.parentNode.parentNode;
							/* console.log("found div: "+ img + " with title: "+ img.getAttribute('title')); */
							addAnalyticsEvent(el, img.getAttribute('title'), 'open on scroller image');
						}
					});
				}
			} else {
				console.log("searching for share-view failed .. waiting");
			}
			
			setTimeout(function() {
					waitforThumbs();
				}, 1000);

		}
		
		/* only do things, when there is a minimum of javascript functions available.. */
		if ( 'querySelector' in document && 'addEventListener' in window ) {
			waitforThumbs();
		}
		 
	</script>

wonderfull . thx!

updated javascript to track clicks on images as analytic events correctly.
also fixed comments.

changed comment style for easier vi pasting ..

fixed issues with single quotes in album names..

now works with updated google analytics and googletagmanager