Skip to content

A simple Cloudflare Worker to proxy Partytown libs and resolved urls for use with a Shopify app proxy

License

Notifications You must be signed in to change notification settings

edlaver/cloudflare-worker-partytown-shopify-app-proxy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

See: https://bit.ly/partysh0p for the why and how.

  • Install dependencies: npm i

  • Run locally: npm run start (to preview on http://localhost:8787)

  • Check Partytown libs can be proxied: http://localhost:8787/api/partytown/lib/partytown.js

  • Check resolved urls can be proxied: http://localhost:8787/api/partytown/proxy?url=https%3A%2F%2Fwww.google-analytics.com%2Fanalytics.js

  • Deploy to Cloudflare: npm run deploy e.g. https://cloudflare-worker-partytown-shopify-app-proxy.{your cloudflare account name}.workers.dev

  • Set the Proxy URL setting in your App > App setup > App Proxy to: https://cloudflare-worker-partytown-shopify-app-proxy.{your cloudflare account name}.workers.dev/api/partytown/
    App proxy setup screenshot

  • Copy the contents of ./liquid/partytown.liquid into your theme.liquid file, before the closing </head> tag, and configure to meet your needs.

  • Save changes to theme.liquid

  • Ensure you've disabled Google Analytics anywhere else it might be enabled in your Theme.

  • Open Dev Tools (F12) in Chrome/Edge and reload your site.

  • Check in the Network tab that the Partytown scripts are loaded successfully and the service worker is accessing the network (service worker requests show a little cog icon next to them): Network tab output screenshot

  • Check that you're getting some Partytown debug messages in the Console tab: Console tab output screenshot

  • Check in Google Analytics that user events are being tracked (e.g. the active user count shows you browsing the site). It may take a minute or two for Google Analytics to start showing events, so be patient. Google analytics screenshot

  • Once you're happy Partytown is working correctly, you can set the assign partytown_use_debug_mode to false in the theme.liquid file for performance benefits.

  • You can benchmark the difference Partytown makes by toggling the assign partytown_use_partytown setting on and off in the theme.liquid file, and then running Google PageSpeed Insights: https://pagespeed.web.dev/

    • Remember to set assign partytown_use_debug_mode to false as well to get the best performance
    • Note: PageSpeed Insights will only work with public sites, not with password protected sites
    • To evaluate password protected sites, use the Lighthouse report option in Dev Tools (F12) instead.
    • Partytown disabled: Lighthouse score screenshot - Partytown disabled
    • Partytown enabled: Lighthouse score screenshot - Partytown enabled
  • Party! 🎉

About

A simple Cloudflare Worker to proxy Partytown libs and resolved urls for use with a Shopify app proxy

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published