Analytics tracking maxigallery image clicks

181 Posts

pagalo Reply #1, 15 years, 5 months ago

Hi all,

I am having trouble getting maxigallery to call an onclick.

I followed googles tute on how to add analytics and track out going links but maxigallery seams to be re-writing my link?
That’s my guess. If so how/where do I change maxi’s code to stop removing this the onclick.

In the source code the link looks like this:

<a href="http://www.facebook.com/" title="http://www.facebook.com/" class="open" onClick="recordOutboundLink(this, 'Advertisment Links', 'http://www.facebook.com/');return false;"></a>
	<img src="/assets/galleries/7/correct_dimensions_for_ad.jpg" class="full" alt="correct_dimensions_for_ad.jpg" />
	<img src="/assets/galleries/7/tn_correct_dimensions_for_ad.jpg" class="thumbnail" alt="correct_dimensions_for_ad.jpg" />

I just modified the maxigallery template file:
And turned on embededlinks in the maxi call, so clicking the image works.
But in code checkers like Firebug for firefox the link looks very different. It adds a target="_blank" so is this why the onclick isn’t called?

Here is my onclick call and analytics call, both just above the </head> call:

<script type="text/javascript">
function recordOutboundLink(link, category, action) {
  try{
    var pageTracker = _gat._getTracker("UA-xxx-82");
    pageTracker._trackEvent(category, action);
    setTimeout('document.location = "' + link.href + '"', 100)
  } catch(err) {}
}
</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxx-82']);
  _gaq.push(['_trackPageview']);
var pageTracker = _gat._getTracker("UA-xxx-82');
pageTracker._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);
  })();
</script>

Confused!?

☆ A M B ☆
2,475 Posts

Everett Reply #2, 15 years, 5 months ago

A hugely helpful plugin is the WebDev toolbar for FireFox -- it lets you see the GENERATED source: i.e the actual document after any JS manipulations. That can help you debug if you haven’t already installed it. There’s a similar plugin for Safari.

Also, to be thorough, you may want to do

onclick="javascript:function_name()"

I can’t comment on the MaxiGallery re-writing or not... seems insidious...

Hosting stuff: http://fireproofsocks.com/
Coding stuff: http://craftsmancoding.com/
Blog stuff: http://tipsfor.us/

181 Posts

pagalo Reply #3, 15 years, 5 months ago

Thanks Everett, got Web Dev and it does similar things to firebug.

So it looks like maxi does re-create the embedded links.

On line 92 of the smoothgallery file called jd.gallery.js is this:

if (this.options.embedLinks)
		{
			this.currentLink = new Element('a').addClass('open').setProperties({
				href: '#',
				title: '',
				target: '_blank',
			}).injectInside(element);
			if ((!this.options.showArrows) && (!this.options.showCarousel))
				this.galleryElement = element = this.currentLink;
			else
				this.currentLink.setStyle('display', 'none');
		}

I added this to the properties and it works, but not sure how to change the placeholder or just set it to a var on the href link?

onClick: 'javascript:recordOutboundLink(this, "Advertisment Links", "[+maxigallery.picture.title:htmlent+]");return false;'

181 Posts

pagalo Reply #4, 15 years, 5 months ago

Okay worked it out.

I ended up find this code:
javascript:_gaq.push(["_trackEvent", "Advertisment Links", this.href]);

And it just happens to work with maxigallery, most of the others did not.

To add it to your gallery, just edit the template gallerypicturetpl.html
And have links turned on in your maxi call.