---
title: Defining a Client Side Variation
description: Client Side Variation work on the client side (your browser) to change the page using JavaScript and are not processed using the SiteSpect engine on the server side. They make it easier to test websit
---
[Skip to content](https://doc.sitespect.com/knowledge/defining-a-client-side-factor#main-content)
English
Show submenu for translations
- [A/B Testing](https://www.sitespect.com/testing-and-experimentation/)
- [Personalization](https://www.sitespect.com/personalization-targeting/)
- [Recommendations](https://www.sitespect.com/recommendations/)
Open main navigation
Close main navigation
- [A/B Testing](https://www.sitespect.com/testing-and-experimentation/)
- [Personalization](https://www.sitespect.com/personalization-targeting/)
- [Recommendations](https://www.sitespect.com/recommendations/)
- English
Show submenu for translations
How can we help you?
- There are no suggestions because the search field is empty.
1. [Knowledge Base](https://doc.sitespect.com/knowledge?hsLang=en)
2. [Build](https://doc.sitespect.com/knowledge/build?hsLang=en)
3. [Factors](https://doc.sitespect.com/knowledge/build?hsLang=en#factors)
# Defining a Client Side Variation
Client Side Variation work on the client side (your browser) to change the page using JavaScript and are not processed using the SiteSpect engine on the server side. They make it easier to test websites that are heavily built with JavaScript. These Variations, along with a JavaScript SDK, give you a powerful approach to testing your [Single-Page Application](https://doc.sitespect.com/knowledge/sitespect-and-single-page-applications?hsLang=en) built with JavaScript frameworks like React and Angular (but are not limited to a technology stack) .
#### Defining a Client Side Variation from within the Campaign Builder
To define a Client-Side Variation:
1. Start by creating an A/B or Personalization Campaign from the NEW menu option.
2. In the Variations section, ensure Find & Replace is selected, and select Client Side from the Type select list.
When you select Client Side Variation in the Type list, the **Selector** field becomes available to enter the name of a **CSS Selector**. When a page component matches this Selector, SiteSpect applies the settings in the **Changes** section defined for the Variation.
### **Changes**
**HTML Replacement** – Replaces the HTML content of the selected components.
**Attributes** – Replaces the Attribute with the specified value if the Attribute exists. If the Attribute does not exist, this adds it. Enter the name of the Attribute on the left side of the field and the Value on the right side.
**CSS** – Replaces the CSS rule with the specified value if the rule exists. If the CSS rule does not exists, this adds it. Enter the rule on the left side of the field and the value on the right. Note that if there is an !important rule, this won't override it unless this rule is also !important.
**Custom** – Lets you provide JavaScript code to execute on each matching component. The first line and the last line of the field are not editable. Note that this function is run against each matching component. In addition, each time it's run, the current component it's working on can be accessed with the keyword this.
- [Get Started](https://doc.sitespect.com/knowledge/get-started?hsLang=en#main-content)
- [SiteSpect Support](https://doc.sitespect.com/knowledge/get-started?hsLang=en#sitespect-support)
- [Overview Information](https://doc.sitespect.com/knowledge/get-started?hsLang=en#overview-information)
- [Intro to SiteSpect](https://doc.sitespect.com/knowledge/get-started?hsLang=en#intro-to-sitespect)
- [Account Setup](https://doc.sitespect.com/knowledge/get-started?hsLang=en#account-setup)
- [Artificial Intelligence](https://doc.sitespect.com/knowledge/get-started?hsLang=en#artificial-intelligence)
- [Dashboard](https://doc.sitespect.com/knowledge/dashboard?hsLang=en)
- [Build](https://doc.sitespect.com/knowledge/build?hsLang=en#main-content)
- [Setting Up a Campaign](https://doc.sitespect.com/knowledge/build?hsLang=en#setting-up-a-campaign)
- [Create a Client-Side Campaign](https://doc.sitespect.com/knowledge/build?hsLang=en#create-a-client-side-campaign)
- [Create a Server-Side Campaign](https://doc.sitespect.com/knowledge/build?hsLang=en#create-a-server-side-campaign)
- [Metrics](https://doc.sitespect.com/knowledge/build?hsLang=en#metrics)
- [Audiences](https://doc.sitespect.com/knowledge/build?hsLang=en#audiences)
- [Triggers](https://doc.sitespect.com/knowledge/build?hsLang=en#triggers)
- [Variations](https://doc.sitespect.com/knowledge/build?hsLang=en#variations)
- [Traffic Management](https://doc.sitespect.com/knowledge/build?hsLang=en#traffic-management)
- [Preview](https://doc.sitespect.com/knowledge/build?hsLang=en#preview)
- [Factors](https://doc.sitespect.com/knowledge/build?hsLang=en#factors)
- [Advanced Settings](https://doc.sitespect.com/knowledge/build?hsLang=en#advanced-settings)
- [Omnichannel](https://doc.sitespect.com/knowledge/build?hsLang=en#omnichannel)
- [Regular Expressions (Regex)](https://doc.sitespect.com/knowledge/build?hsLang=en#regular-expressions-regex)
- [WATTS](https://doc.sitespect.com/knowledge/build?hsLang=en#watts)
- [Recommendations](https://doc.sitespect.com/knowledge/build?hsLang=en#recommendations)
- [Monitor](https://doc.sitespect.com/knowledge/monitor?hsLang=en)
- [Analyze](https://doc.sitespect.com/knowledge/analyze?hsLang=en#main-content)
- [Data Export and Integration](https://doc.sitespect.com/knowledge/analyze?hsLang=en#data-export-and-integration)
- [SiteSpect Reports](https://doc.sitespect.com/knowledge/analyze?hsLang=en#sitespect-reports)
- [Site](https://doc.sitespect.com/knowledge/site?hsLang=en#main-content)
- [Tools](https://doc.sitespect.com/knowledge/site?hsLang=en#tools)
- [Configuration](https://doc.sitespect.com/knowledge/site?hsLang=en#configuration)
- [Developers](https://doc.sitespect.com/knowledge/developers?hsLang=en#main-content)
- [API Reference](https://doc.sitespect.com/knowledge/developers?hsLang=en#api-reference)
- [Code Samples](https://doc.sitespect.com/knowledge/developers?hsLang=en#code-samples)
- [Tips & Tricks](https://doc.sitespect.com/knowledge/developers?hsLang=en#tips-tricks)
- [Mobile](https://doc.sitespect.com/knowledge/mobile?hsLang=en)
- [Implementation, Deployment, and Security](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#main-content)
- [How does SiteSpect work with CDNs?](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#how-does-sitespect-work-with-cdns)
- [Single Tenant Implementations](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#single-tenant-implementations)
- [Security Features](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#security-features)
- [Deployment and Implementation Overview](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#deployment-and-implementation-overview)
- [SiteSpect Engine & Admin API](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#sitespect-engine-admin-api)
- [Third-Party Integration](https://doc.sitespect.com/knowledge/third-party-integration?hsLang=en#main-content)
- [Google](https://doc.sitespect.com/knowledge/third-party-integration?hsLang=en#google)
- [Zuko](https://doc.sitespect.com/knowledge/third-party-integration?hsLang=en#zuko)
- [Troubleshooting](https://doc.sitespect.com/knowledge/troubleshooting?hsLang=en)
- [Releases](https://doc.sitespect.com/knowledge/releases?hsLang=en#main-content)
- [Superfresh](https://doc.sitespect.com/knowledge/releases?hsLang=en#superfresh)
- [Feedback](https://doc.sitespect.com/knowledge/feedback?hsLang=en)
- [A/B Testing](https://www.sitespect.com/testing-and-experimentation/)
- [Personalization](https://www.sitespect.com/personalization-targeting/)
- [Recommendations](https://www.sitespect.com/recommendations/)
[](http://monetate.com)
[mailto:email@email.com](mailto:email@email.com)
Copyright © 2026, Monetate