Evergreen Goal Tracker

A fundraising progress bar or thermometer for any website, kept up to date from a spreadsheet.

Update the total in a Google Sheet, and every page showing the tracker updates: your home page, your giving page, a sidebar, even a big screen at your gala. It works anywhere you can paste a block of HTML: Squarespace, WordPress, Wix, Webflow, Shopify (2.0 themes), Ghost, Carrd and plain HTML pages.

• Two styles: a progress bar or a classic thermometer.
• Three sizes: normal, compact for sidebars and footers, and large for projecting at events.
• Shows what donors want to see: amount raised, goal, percent of goal, number of donors, days left, and a "Goal reached!" badge.
• Milestones marked along the bar, like $5,000, $10,000 and $15,000.
• Give button linking to your donation page: Squarespace, Givebutter, Donorbox, PayPal, Tithe.ly or any other.
• Two ways to keep score:
  • type the total into one cell, or
  • keep a list of gifts and let it add them up and count donors, with an optional fund column so one sheet can drive several campaigns.
• No spreadsheet needed for simple use: put the numbers right in the snippet.
• Live mode re-checks the sheet every minute or so, for galas, telethons and giving days.
• Fits your site: uses your fonts, one brand color, shielded from site-wide styles.
• Accessible: screen readers hear "$12,480 raised of $20,000 goal (62%)". Respects reduced-motion settings.
• No tracking, cookies or accounts. One script of about 18 KB.

Open demo/index.html to try it.

Quick start (10 minutes)

1. Make your sheet. In Google Sheets, choose File → Import → Upload and pick templates/goal-settings.csv, then change the numbers and wording. Or use templates/gift-list.csv if you'd rather list each gift.
2. Publish it: File → Share → Publish to web, choose the tab, choose Comma-separated values (.csv), click Publish, and copy the link.
3. Paste the snippet from embed/1-google-sheet-embed.html into an HTML or code block on your site, put in your link, and publish. INSTALL.md has click-by-click steps for each site builder.

From then on, change the Raised number (or add gifts) in the sheet. Google refreshes published sheets within about 5 minutes.

Your sheet

Option A: settings (one row per setting)

Option B: a list of gifts

If the first row has an Amount column (also accepted: Gift, Donation, Pledge), the tracker adds up the amounts and counts each positive gift as a donor. Blank amounts are skipped, and refunds can be entered as negative numbers like -50 or (50).

Add a Fund or Campaign column and set data-campaign="Roof" to count only that fund's gifts, so one sheet can feed several trackers. With a gift list, put the goal, title and other settings in the snippet (data-goal="20000" and so on).

Only publish the tab the tracker needs. If your gift list has names or contact details, keep it private and publish a separate tab with just the total, using a formula like =SUM(Gifts!C:C) in the Raised row.

Snippet options

Add these to the <div data-goal-tracker …> line. Any value can also come from the sheet, and the sheet wins.

Every label can be changed with data-text-…, for example data-text-raised="recaudado" or data-text-reached="We did it!". Labels: raised, of, funded, donors, donor, daysLeft, dayLeft, lastDay, ended, reached, over, donate, loading, error, newTab. Keep {goal}, {pct} and {n} where the numbers go.

For developers, the tracker fires goaltracker:ready and goaltracker:update events with the numbers in event.detail.

Need help?

Email evergreen.code.info@gmail.com. See LICENSE.txt for your license terms.

Installation

Every install has the same two parts:

1. Your data: a published Google Sheet, rows pasted into the page, or an uploaded CSV file.
2. The snippet: one of the files in embed/, pasted where you want the tracker to appear.

Step 1: Set up a Google Sheet (recommended)

With a Google Sheet, anyone on your team can update the total without touching the website, and every page showing the tracker updates.

1. Go to sheets.google.com, then File → Import → Upload and choose templates/goal-settings.csv. Or just type the column names into row 1.
2. Change the numbers and wording to match your campaign.
3. Click File → Share → Publish to web.
4. Under Link, choose the sheet tab with your list, change "Web page" to Comma-separated values (.csv), and click Publish.
5. Copy the link it shows. It contains /pub? and ends in output=csv.

Use this link, not the address in your browser bar. A link ending in /edit will not work, and the finder will show a message if you paste one by mistake.

After publishing, changes in the sheet appear on your site within about 5 minutes. Google refreshes published sheets on its own tracker.

Step 2: Add it to your site

Goal Tracker works on any website where you can paste HTML. The steps are the same everywhere:

1. Add an HTML / code / embed block where the tracker should appear.
2. Paste the contents of the embed file you chose.
3. Put in your data link, then publish.

The embed files use the compact script (dist/goal-tracker.min.js, about 18 KB). That keeps them under the size limits some builders put on code blocks.

Most builders only run custom code on the published page, not inside the editor. If you see code or a blank box while editing, check the live page.

Any website (HTML)

Put the <div data-goal-tracker …> line where the tracker should appear. Then load the script once anywhere on the page:

• Inline: paste the <script>…</script> part of embed file 1.
• From a file: upload dist/goal-tracker.min.js and use <script src="goal-tracker.min.js" defer></script>.

The CSV must be on the same website or a Google Sheets "Publish to web" link. A CSV on another website only loads if that site allows it (CORS).

Carrd

1. Add an Embed element and set Type to Code.
2. Paste the embed file, then set your link.
3. Under Style, choose Inline.

Embeds need a Carrd plan that includes them.

Ghost

1. In the post or page editor, type /html to add an HTML card.
2. Paste the embed file, then set your link.
3. Publish.

Shopify

1. Go to Online Store → Themes → Customize.
2. Open the page template where the tracker should go, for example a "Give" page.
3. Click Add section and choose Custom Liquid.
4. Paste the embed file, set your link, and click Save.

This works with Shopify's Online Store 2.0 themes, such as Dawn and the other free themes Shopify has offered since 2021. If Custom Liquid isn't in the list, your theme is older and doesn't support this method. Email us and we'll help.

Shopify limits a Custom Liquid section to 50 KB. The Google Sheet snippet fits easily. If you paste a long list of rows straight into the snippet and Shopify won't save it, use the Google Sheet option instead.

Squarespace (7.0 and 7.1)

Squarespace runs scripts in Code Blocks only on plans that allow custom code. If your plan doesn't, the block will show the code instead of the tracker.

1. Open the page, click Edit, and add a Code block.
2. Paste the embed file, replacing what's there, then set your link.
3. Click Apply, then Save.

Webflow

1. Drag a Code Embed element onto the page.
2. Paste the embed file, then set your link.
3. Click Save & Close, then Publish. The tracker only runs on the published site, not in the Designer.

Code Embed needs a Webflow site plan that allows custom code.

Wix

1. Add Embed Code → Embed HTML.
2. Choose Code, paste the embed file, then set your link.
3. Resize the box so it's tall enough. Wix shows embeds in a fixed-height frame.

WordPress

Block editor:

1. Add a Custom HTML block.
2. Paste the embed file, set your link and click Update.

Uploading your own files:

1. Upload dist/goal-tracker.min.js and your CSV through Media → Add New. If your site blocks .js uploads, use the Google Sheet option instead.
2. Copy each file's URL.
3. Put them into embed/3-hosted-file-embed.html, and paste that into a Custom HTML block.

Some security plugins strip scripts from posts. If the block shows nothing on the live page, use a "header and footer scripts" plugin to load the script.

Several trackers on one page

Each one can use its own data-src, or share one gift list with a different data-campaign. A full tracker on your giving page and a data-size="compact" one in your footer can share the same sheet.

Big screens at events

Open a page with data-size="large" data-align="center" data-refresh="60" on the computer connected to the projector, and press F11 for full screen. Have someone update the sheet as gifts come in; the screen catches up within a minute or two (Google's published copy can lag a few minutes behind the sheet).

Troubleshooting

Changelog

1.0.0 (2026-10-15)

First release.

• Progress bar and thermometer styles; normal, compact and large sizes.
• Raised, goal, percent, donors, days left, milestones, "Goal reached!" badge and a Give button.
• Data from a Google Sheet (settings or a list of gifts, with an optional fund filter), a CSV file, pasted rows, or the snippet itself.
• Live refresh for events.
• Install guides for Carrd, Ghost, Shopify, Squarespace, Webflow, Wix, WordPress and plain HTML.
• Accessible progress information for screen readers; respects reduced motion; shielded from site-wide styles.