Static HTML
Vanilla JavaScript on a static page using the Client SDK
This example uses the base Javascript Client SDK only — there is no server logic. The moment the script mounts in the browser it fetches the config and shows the control or variation.
This works great for static files on a CDN without any server side logic. The downside is that there is always layout shift (CLS) when the test is applied to content that is visible above the fold. That is solvable by running Improve on the server.
Install
npm i @obelism/improve-sdkScript
The script creates an ImproveClientSDK, fetches the config, sets up the visitor and reads the value for the startpage-visual test — then writes it into the page.
import { ImproveClientSDK } from '@obelism/improve-sdk/client'
const improveClient = new ImproveClientSDK({
organizationId: 'org_MJFL46Z0WXGQ5OHW1ZXSM3Q88S',
environment: 'staging',
})
improveClient.fetchConfig().then(() => {
improveClient.setupVisitor(window.navigator.userAgent)
const value = improveClient.getTestValue('startpage-visual')
document.querySelector('#output').textContent = value
})Markup
The script is bundled (the example uses tsup) to dist/index.mjs and loaded with a deferred <script> tag. The #output element holds the control value for the first paint until the SDK swaps it.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Static website</title>
<script defer src="./dist/index.mjs"></script>
</head>
<body>
<h1>Static website</h1>
<p>Your version: <span id="output">control</span></p>
</body>
</html>