Google Apps Script Ecommerce Deployment: Understanding Code.gs, HTML Files, and Permissions

If you need to get a Google Apps Script ecommerce web app live, the core answer is simple: organize your Code.gs backend, build the required HTML front‑end, set the correct web‑app deployment settings, and then test the triggers and permissions before sharing the URL. The steps below walk you through each part, explain why they matter, and give you a ready‑to‑use checklist.

1. Project Structure – What Code.gs and HTML Files Do

In an Apps Script project the files are split into two logical layers:

• Code.gs (or any .gs file) – JavaScript‑like code that runs on Google’s servers. It handles data logic, reads/writes to Google Sheets, calls external APIs, and defines functions that the HTML UI can invoke.
• HTML files (.html) – Markup that renders in the browser. They can contain plain HTML, CSS, and client‑side JavaScript. The UI talks to the server side via google.script.run.

Keeping a clear separation helps you debug faster and lets non‑technical teammates edit the UI without touching the backend.

Typical file layout for a simple order form

Code.gs // server‑side logic (saveOrder, getProducts) Index.html // main UI – order form Header.html // optional reusable header Footer.html // optional reusable footer

All HTML files are combined at runtime, so you can include them with <?!= HtmlService.createHtmlOutputFromFile('Header').getContent(); ?> if you prefer modular markup.

2. Deploying the Web App – Permissions, Triggers, and Testing

Once the files are in place, you must publish the project as a web app. Follow these exact steps:

1. Open the script editor (Extensions → Apps Script) and click Deploy → New deployment.
2. Choose Web app as the deployment type.
3. Set Execute the app as to Me (your email) so the script runs with your Sheet permissions.
4. Set Who has access to the appropriate level:
   • Only myself – for testing.
   • Anyone with the link – for a public storefront (no Google login required).
   • Anyone – if you want the app to be discoverable in search results (rare for ecommerce).
5. Click Deploy. Copy the generated URL – this is the address you will share with customers.

Triggers are optional for ecommerce. A common use case is a time‑driven trigger that sends a daily sales summary email:

function createDailySummaryTrigger() { ScriptApp.newTrigger('sendDailySummary') .timeBased() .everyDays(1) .atHour(20) // 8 PM server time .create(); }

Run the trigger‑creation function once (manually) to set it up. Remember that triggers inherit the same execution permissions as the script owner.

3. Monitoring, Logs, and Recovery

Even a well‑tested app can hit hiccups. Google provides three built‑in tools:

• Execution log – Open View → Executions to see a list of recent runs, their status, and error messages.
• Stackdriver Logging – Use console.log() in your .gs code; logs appear in the Logs pane and can be filtered by date or function name.
• Version history – Every time you deploy, Apps Script creates a version. You can roll back to a previous version from the Deployments dialog.

If a user reports a broken form, check the execution log first. Common causes are:

1. Missing Sheet permissions (the script lost edit rights after the owner changed the file’s sharing settings).
2. Exceeded daily quota – Apps Script enforces limits on reads/writes per day. If you hit the limit, the script throws a QuotaExceededException. The fix is to batch writes or upgrade to a paid Google Workspace account.
3. Invalid HTML element IDs – client‑side JavaScript may reference an element that was renamed.

To recover quickly, revert to the last stable version and re‑grant the required Sheet permissions.

4. Realistic Example: Simple Order Form Linked to Google Sheet

Assume you sell handcrafted candles and want a lightweight order form that writes each purchase to a Google Sheet named Orders. The steps are:

1. Create a new Google Sheet with headers Timestamp, Name, Email, Product, Quantity, Total.
2. Open Apps Script and add Code.gs: function doGet() { return HtmlService.createTemplateFromFile('Index') .evaluate() .setTitle('Candle Order'); } function saveOrder(data) { const ss = SpreadsheetApp.openById('YOUR_SHEET_ID'); const sheet = ss.getSheetByName('Orders'); sheet.appendRow([ new Date(), data.name, data.email, data.product, data.qty, data.qty * data.price ]); return 'Order received – thank you!'; }
3. Create Index.html with a basic form: <!DOCTYPE html> <html> <head> <base target="_top"> <style>/* minimal styling */</style> </head> <body> <h2>Candle Order</h2> <form id="orderForm"> Name: <input name="name" required><br> Email: <input type="email" name="email" required><br> Product: <select name="product"> <option value="Vanilla" data-price="15">Vanilla – $15</option> <option value="Lavender" data-price="18">Lavender – $18</option> </select><br> Qty: <input type="number" name="qty" value="1" min="1" required><br> <button type="submit">Place Order</button> </form> <div id="msg"></div> <script> let price = 15; function updatePrice(){ const sel = document.querySelector('[name="product"]'); price = Number(sel.selectedOptions[0].dataset.price); } function handleSubmit(e){ e.preventDefault(); const form = e.target; const data = { name: form.name.value, email: form.email.value, product: form.product.value, qty: Number(form.qty.value), price: price }; google.script.run.withSuccessHandler(msg=>{ document.getElementById('msg').innerText = msg; form.reset(); }).saveOrder(data); } </script> </body> </html>
4. Deploy as a web app (see section 2) and set access to “Anyone with the link”.
5. Test the form in an incognito window, submit a test order, and verify the row appears in the Sheet.

This example illustrates the full flow without any third‑party payment gateway – ideal for a proof‑of‑concept or a low‑volume boutique.

5. Common Mistakes and How to Fix Them

• Forgot to publish a new version after code changes – The live URL always runs the last deployed version. After editing, click Deploy → Manage deployments → Edit and select “Create new version”.
• Using the wrong execution identity – If you choose “User accessing the web app”, the script runs with the visitor’s permissions, causing “You do not have permission to call SpreadsheetApp” errors. Keep it on “Me”.
• Hard‑coding Sheet IDs in multiple places – Store the ID in a script property (PropertiesService.getScriptProperties()) so you only update it once.
• Exceeding URL length limits – Avoid sending large data objects via GET parameters; always use google.script.run (POST‑like) for form submissions.

6. Deployment Checklist

• ✅ Sheet is created, headers set, and sharing set to “Anyone with the link can edit” (or shared with your Google account only).
• ✅ All .gs files are saved and a version is created.
• ✅ HTML files are validated (no stray <script> that conflicts with Apps Script sandbox).
• ✅ Web‑app deployment settings: Execute as **Me**, Access **Anyone with the link** (or appropriate level).
• ✅ Test the URL in a private/incognito browser session.
• ✅ Verify a test entry appears in the Sheet.
• ✅ Set up any needed triggers (e.g., daily summary) and confirm they run.
• ✅ Review execution logs for errors after the first few orders.
• ✅ Document the version number and deployment date for future roll‑backs.

7. Frequently Asked Questions

Do I need a paid Google Workspace account?

For low‑volume stores the free consumer account is sufficient. If you expect >500 writes per day or need advanced security (domain‑wide delegation), a Workspace plan removes most quota limits.

Can I accept credit‑card payments directly?

Apps Script cannot process PCI‑compliant payments on its own. You can embed a Stripe Checkout button in your HTML and let Stripe handle the transaction, then record the result in the Sheet via a webhook.

What happens if the Sheet is deleted?

The script will throw an error and stop accepting orders. Keep a backup copy of the Sheet (File → Make a copy) and store the backup ID in a script property for quick restoration.

With the steps above you can move from a prototype to a live, low‑cost ecommerce front‑end that runs entirely on Google’s infrastructure.

Next steps: View the Apps Script ecommerce source‑code package: /products/ecommerce-website-google-sheets-apps-script. If you need help deploying the web app or customizing the workflow, contact us at /contact.