Fancy Gadgets

Legacy
This page was about embedding gadgets into Google sites. Google has removed gadgets now but you may want to reuse some of the codes embedded into an iFrame.
I’ve had a lot of fun with this topic since it combines a whole bunch of Google Apps Script things. However it was hard work, with many problems to solve. I hope you find it interesting and can adapt it to your site if you have one, or at least benefit from some of the stuff I have discovered. As said above, gadgets don’t work anymore on sites but you may find some value in reusing some of the codes. This is why I haven’t deleted those pages
The objective was to display some information about the current page and the topic it is part of, using data from Google Analytics. If you are interested in any of these things you’ll find something about it in this section. Hover over the image above to see what they look like.
Here’s a static image of how it looks
[su-spacer size=”10″]
The first column is the current page, and the second the current topic
  • The page is ‘from VBA to Google Apps Script’
  • The topic is the same, since we are looking at the introductory page for this topic
  • G+1 are the +1 counts for the page, and for all pages in the topic. The bar represents the pages %age of total G+ for this topic, and the topic %age of total G+ for the entire site.
  • The rank and page values, and bar values are shown for the 3 different periods.
  • The favorite page within this topic and the favorite topic within the site are shown and can be clicked to go to those pages.
  • Adsense on Google Sites

Background

I had a few options here. My plan A was to use SVG in an html box, but caja sanitizes out SVG. Next I started with htlmservice with html5 canvas, as either a web app or embedded google app script, but you need a gadget to host your apps script in anyway so i got to thinking that maybe I should write the whole thing as a gadget. In particular I wanted to be able to hover over an image for the stats to come into play .. I’m planning to put them on every page, and although I’m starting with just a few I might add more later.
The only way I could resize the gadget iFrame was to write one myself, since neither the standard apps script or iframe gadget are resizable. The point here is so that when you mouseover the analytics image.
the rest of the content would move down and reset after. I also found that putting all the code in the gadget gave me the best performance and was the least susceptible to caja related stuff.  So a gadget it is.
The analytics are collected each night, matched to pages on a site and stored using Database abstraction with google apps script. I opted for Driver MongoLab in the end, but flip over to DriverSheet when testing.