Link Replacement
Link Replacement enables the Tipser Script/Tipser Elements to automatically replace affiliate link outs and product links into native commerce experience, handled by Bolt 1-click checkout and payment.
Experimental
This feature is in the beta version and publicly available form the v.4.2.1 version onwards.
Getting started
Tipser Script and Tipser Elements require a configuration object to be specified at initialization, which typically looks as follows:
const config = { lang: "en-US" };
//Tipser Elements
<TipserElementsProvider
posId="POS_ID"
config={config}
></TipserElementsProvider>
// Tipser Script usage
tipserScript.initialize("POS_ID", config);
Enabling link replacement
Add a new entry to the config, called linkReplacement with proper contents in order to activate the link replacement behavior.
const config = {
linkReplacement: {
enabled: true,
urls: ['bcgb.com', 'awin.com'],
market: 'us',
withObserver: true
}
};
And pass the following object to the initialisation, for example:
const config = {
linkReplacement: {
enabled: true,
urls: ['bcgb.com', 'awin.com'],
market: 'us',
withObserver: true
}
};
tipserScript.initialize("POS_ID", config);
Voilà, you're set up! 🎉 Now, the script will activate itself and detect all the links from the specified urls and support native 1-click Bolt checkout for all products matched in our product catalog. any link within the allowlisted range of urls array will open a native dialog checkout.
Configuration reference
All parameters must be nested in the top-level linkReplacement config object.
Parameter name | Type | Description |
---|---|---|
enabled | boolean | Required - Flag indicating that link replacement should be enabled; default: false |
urls | string[] | Required - An allow-list of all URL fragments that the script will scan across and attempt to look-up in Bolt catalog. The URLs do not need schema and the scan is done by matching all URLs found on the enclosed website via “case-insensitive string contains” strategy. If empty or not specified, no links will be matched. |
market | string - "US" | "UK" | Required parameter specifying the inventory market. Needs to be set for the proper URL matching. |
withObserver | boolean | If set to true, the script will listen to all HTML changes and reactively attach native checkout action to new looked up links (needed for dynamically loaded content). |
onClick | (target: LinkMetadata, resume: (boolean) => void) => void | If set, will be called whenever the user clicks on the link that has been matched. Useful to handle custom analytics, cleanup actions or override the onClick behavior (continue with rendering native dialog or pass-through - allow the link out). Last argument is a resume token callback that has to be called with a boolean argument. If the argument is true, the native checkout will be rendered. If false, the link will not open the checkout but will preserve its original behavior. |
customClass | string | If set, every anchor that has the native checkout attached to it via link replacement, will also have the customClass attached to the class list. Can be used to alter the styling/display of the element. |
onClick usages
Detailed reference of how to use onClick and how it may be used to implement A/B tests or attach custom conditional pre/post-render actions.
LinkMetadata schema
interface LinkMetadata {
url: string,
element: HTMLElement,
scanned: boolean,
product: ProductModel
}
ProductModel follows the schema of the API response as documented in our API docs.
Simple randomized traffic split
Show native checkout for randomly selected 50% of actions globally.
const config = {
linkReplacement: {
enabled: true,
onClick: (target, resume) => {
resume(Math.random() < 0.5);
}
}
};
Simple 50-50 traffic split
Simple local storage-based implementation of the A/B version persistence and behavior differentiation based on that (to ie. implement a 50-50 A/B test of native vs affiliate). This one however stays with the used during this single and every next session on the same device, given no incognito mode is on.
// simple persistence so a shopper has a consistent
// experience when clicking on any recognized link
const key = 'bolt__native_checkout_experiement';
let renderNativeCheckout;
if (localStorage.getItem(key) !== null) {
renderNativeCheckout = localStorage.getItem(key);
} else {
renderNativeCheckout = Math.random() < 0.5;
localStorage.setItem(key);
}
const config = {
linkReplacement: {
enabled: true,
onClick: (target, resume) => {
resume(renderNativeCheckout);
}
}
};
Pre- and post-render hook
Below example showcases how the developer can hook in custom analytics before and after the product native checkout is rendered. Notice also how the product data can be extracted from the event payload and passed to the analytics.event
handler.
const config = {
linkReplacement: {
enabled: true,
onClick: (target, resume) => {
analytics.event('link-click-pre-render', { data: target.product } );
resume(true);
analytics.event('link-click-post-render', { data: target.product } );
}
}
};
Show native checkout only for specific brand
const config = {
linkReplacement: {
enabled: true,
onClick: (target, resume) => {
resume(target.product.merchantName === 'Nike x Supreme');
}
}
};
Show native checkout only for in stock products
Another example - overriding the default behaviour of opening the native checkout regardless of the stock count - trigger native checkout dialog only if the product that was matched is in stock.
const config = {
linkReplacement: {
enabled: true,
onClick: (target, resume) => resume(target.product.isInStock)
}
};
Updated 6 months ago