Component Detection

Component detection lets you load scripts only when a specific element exists on the page. No element? No script loaded.

Why Use Component Detection?

Instead of loading scripts globally and checking for elements in your code:

// Without component detection - script always loads
const slider = document.querySelector('.slider');
if (slider) {
  initSlider(slider);
}

You can tell GoodCraft Script to only load the script when the element exists:

// With component detection - script only loads if .slider exists
initSlider(document.querySelector('.slider'));

Benefits:

Faster pages (less JavaScript to parse)
Cleaner code (no existence checks needed)
Fewer errors (script won’t run in wrong context)

Setting Up Component Detection

Open your script

Go to your site and open the script you want to configure.

Find Component Selector

In the script settings panel, find Component Selector.

Enter a CSS selector

Enter any valid CSS selector:

.testimonial-slider
#pricing-calculator
[data-animation="fade"]

Save

The script will now only load on pages where that element exists.

Selector Examples

Class Selector

.slider

Loads when any element has the slider class.

ID Selector

#hero-video

Loads when an element with ID hero-video exists.

Data Attribute

[data-lightbox]

Loads when any element has a data-lightbox attribute.

Data Attribute with Value

[data-animation="parallax"]

Loads only when the attribute has a specific value.

Combined Selectors

.section.has-animation

Loads when an element has both classes.

Multiple Elements (OR)

.slider, .carousel, [data-swiper]

Loads if ANY of these elements exist.

Common Patterns

Animation Library Scripts

Only load GSAP animations when animated elements exist: Selector: [data-animate]

// Script only loads if [data-animate] elements exist
gsap.utils.toArray('[data-animate]').forEach(el => {
  gsap.from(el, { opacity: 0, y: 50 });
});

Form Handling

Only load validation on pages with forms: Selector: form[data-validate]

// Script only loads if form[data-validate] exists
document.querySelector('form[data-validate]').addEventListener('submit', validate);

Third-Party Widgets

Only load Calendly script on pages with the embed: Selector: .calendly-inline-widget

Video Players

Only load video player code when videos exist: Selector: [data-video-player]

Component Detection vs Page Targeting

Both control where scripts load, but they work differently:

Feature	Page Targeting	Component Detection
Based on	URL path	DOM elements
Checks	Before page loads	After DOM ready
Best for	Section-based sites	Component-based sites
Example	`/blog/*` pages	Elements with `.slider`

Use Page Targeting when you know which URLs need the script. Use Component Detection when scripts should follow components, regardless of URL.

Using Both Together

You can combine them for precise control:

Page Targeting: /services/*
Component Selector: .pricing-calculator

The script loads only on service pages that have a pricing calculator.

Best Practices

Use data attributes for explicit targeting

Data attributes make intent clear and don’t conflict with styling:

<!-- Clear: this element uses a script -->
<div data-slider>...</div>

<!-- Unclear: is .slider for styling or scripts? -->
<div class="slider">...</div>

Be specific with selectors

Avoid overly broad selectors that might match unexpected elements:

/* Too broad */
div

/* Better */
.hero-slider

/* Best */
[data-hero-slider]

Document your selectors

Add comments in your scripts explaining what selector triggers them:

/**
 * Testimonial Slider
 * Component Selector: [data-testimonial-slider]
 */

Test on multiple pages

Verify the script loads where expected and doesn’t load where it shouldn’t.

Debugging

If a script isn’t loading when expected:

Check the selector: Open browser DevTools and run:
```
document.querySelector('.your-selector')
```
If it returns null, the element doesn’t exist.
Check for typos: Selectors are case-sensitive for IDs and data attributes.
Check timing: The element must exist when the page loads. Dynamically added elements won’t trigger component detection.
Enable debug mode: Add ?debug=true to your URL to see loader logs:
```
https://yoursite.com/page?debug=true
```

Getting Started

Basics

Features

Reusables

Deployment

Why Use Component Detection?

Setting Up Component Detection

Selector Examples

Class Selector

ID Selector

Data Attribute

Data Attribute with Value

Combined Selectors

Multiple Elements (OR)

Common Patterns

Animation Library Scripts

Form Handling

Third-Party Widgets

Video Players

Component Detection vs Page Targeting

Using Both Together

Best Practices

Debugging

Next Steps

Page Targeting

Load Order

Getting Started

Basics

Features

Reusables

Deployment

​Why Use Component Detection?

​Setting Up Component Detection

​Selector Examples

​Class Selector

​ID Selector

​Data Attribute

​Data Attribute with Value

​Combined Selectors

​Multiple Elements (OR)

​Common Patterns

​Animation Library Scripts

​Form Handling

​Third-Party Widgets

​Video Players

​Component Detection vs Page Targeting

​Using Both Together

​Best Practices

​Debugging

​Next Steps

Page Targeting

Load Order

Why Use Component Detection?

Setting Up Component Detection

Selector Examples

Class Selector

ID Selector

Data Attribute

Data Attribute with Value

Combined Selectors

Multiple Elements (OR)

Common Patterns

Animation Library Scripts

Form Handling

Third-Party Widgets

Video Players

Component Detection vs Page Targeting

Using Both Together

Best Practices

Debugging

Next Steps