Skip to main content
Control exactly where your scripts run. Load them globally, on specific pages, or only when certain elements are present on the page.

​
Targeting options

​
Global scripts

Scripts set to All Pages load on every page of your site. Use this for:
  • Analytics and tracking
  • Global navigation behavior
  • Site-wide styles

​
Page-specific scripts

Select specific pages where a script should load. You can target pages by: Exact path: 
/about
/contact
/blog/my-post
Path patterns: 
/blog/*       # All blog posts
/products/*   # All product pages

​
Component detection

Load scripts only when specific elements exist on the page. This is powerful for:
  • Loading a slider script only on pages with sliders
  • Running form validation only when forms are present
  • Applying animations to specific components
Enter a CSS selector. The script loads if any matching element exists.
.testimonial-slider
#contact-form
[data-animation="fade"]

​
How targeting works

When a page loads, the GoodCraft Script loader:
  1. Checks the current URL against page rules
  2. Queries the DOM for component detection selectors
  3. Loads scripts that match either condition
  4. Skips scripts that don’t match
This happens before your scripts execute, ensuring they only run where intended.

​
Priority and load order

When multiple scripts match a page, they load in priority order:
PriorityLoad Order
1 (highest)Loads first
2Loads second
……
10 (lowest)Loads last
Set higher priority for scripts that other scripts depend on. For example, load a utility library (priority 1) before scripts that use it (priority 2+).

​
Examples

​
Load slider only where needed

Selector: .w-slider Effect: Script loads only on pages with Webflow sliders

​
Blog-specific scripts

Pages: /blog/* Effect: Script loads on all blog posts but not on other pages

​
Form validation

Selector: form[data-validate] Effect: Script loads only on pages where forms have the data-validate attribute

​
Debugging targeting

Open browser DevTools and check the console. The loader logs which scripts were loaded and why: 
[GCScript] Loaded: nav-animations.js (matched page: /about)
[GCScript] Loaded: slider.js (matched selector: .w-slider)
[GCScript] Skipped: form-validation.js (no matching elements)
Debug logging is only enabled in development mode or when you add ?gcscript_debug=true to the URL.