Websites‎ > ‎Google Sites How-tos‎ > ‎

Google Sites - Awesome Table - Gadget

posted 3 May 2013, 03:55 by Stephen Hind   [ updated 21 May 2014, 05:36 ]

Awesome Table Gadget
explained by Steegle.com

Display awesome tables in your Google Site with this gadget from Google Apps Script Top Contributor and Google Gadget guru Romain Vialard.




Instructions

  1. Open a Google Sheet (Google Drive Spreadsheet), or make a new one, and on the first row define titles for each column.
  2. On the second row of your Google Sheet add filters you want to display in the table.
  3. Share the Google Sheet with those who need to see it.  If you want to add the table to a public site make sure you share the sheet as either Anyone with the link or Public.  If you do not want the public to see the table just share with the people who you want to see it.
  4. Go to your site and edit the page where you want the gadget to appear
  5. Use the Insert menu, then More Gadgets... and then use the Add by URL link
  6. In the Add gadget by URL box enter this url http://goo.gl/ZmMP7
  7. Add the minimum required information needed for the gadget to work:
    • Spreadsheet key - the long set of numbers and letters Google Drive gives to your specific spreadsheet
    • Spreadsheet name - the name of the sheet in your spreadsheet you want to get the data from
    • Spreadsheet range - the cell range from the spreadsheet where the data lives, including the title and filter rows.
    • Number of items to display - how many rows you initially want to appear on the table, the rest will display on separate pages.
  8. If you want to use this gadget to track file downloads you can do this by:
    • In one of the cells in your spreadsheet add a column to add the HTML to link to the file and track downloads, e.g.

      <a href="URL-to-your-file" onclick="ga('send', 'pageview', 'URL-to-track');">Link Text</a>

      Where URL-to-your-file is the full web address of the file you want your viewers to download (e.g. a file uploaded to your site or in Google Drive) and URL-to-track is the partial URL you want to appear recorded in Google Analytics: for example you want your viewers to download http://www.example.com/files/download.zip so make this 
      URL-to-your-file and make 
      URL-to-track /files/download.zip

      <a href="http://www.example.com/files/download.zip" onclick="ga('send', 'pageview', '/files/download.zip'])">Link Text</a>

    • In the gadget make sure you specify your Google Analytics Tracking ID in the Google Analytics tracking code box.
  9. Choose how you want the table to appear by setting the Width, Height and whether you want a title and border.
  10. Use the OK button to add the gadget to the page and the Save button to save the page and display your page with the table. 

Feedback

Please let us know if this article helped.

Acknowledgements

Many thanks to Romain who is a Google Apps Script Top Contributor and has worked very hard on this gadget.


Screen Shots

(click for larger images)

Google Sites - Insert - More gadgets...

Google Sites - Insert - More Gadgets...

Google Sites - Add Gadget by URL

Google Sites - Add Gadget by URL - Awesome Table

Awesome Table Gadget Properties

Awesome Table Gadget Properties