Generic Yotpo SMS & Email Web Pixel Installation Guide
- DarkLight
Generic Yotpo SMS & Email Web Pixel Installation Guide
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
In this article, you'll learn how to install the Yotpo SMS & Email web pixel on custom (generic) platforms.
Installation
To install the web pixel, place the following HTML script tag within your <head>:
<script src="https://d18eg7dreypte5.cloudfront.net/browse-abandonment/v2/generic.js" async>Data Layer
The script will listen to updates on the <wtba> global. You need to make sure that you re-use it when it already exists.
<script>
window.wtba = window.wtba || []
</script>Store identification
Shopify Headless example:
window.wtba = window.wtba || []
window.wtba.push({
"type": "config",
"options": {
"platform": 2, //shopify
"store": "unique-shopify-name.myshopify.com"
}
})Generic example:
window.wtba.push({
"type": "config",
"options": {
"store_id": "YdEFYptw2VokktebZtnkJoYbvn6jnxd737e0sUTO"
}
})Options:
store String - Shopify-only .myshopify.com permanent domain (Required in Shopify)
store_id String - For all other platforms you need to provide your Yotpo App Key. (Required in Adobe Commerce, Generic)
platform Number - Platform code, default: 4 (Optional)
4 - Generic
2 - Shopify
3 - Magento
Customer identification
After you set your store identification, the script will automatically identify customers who go through subscription forms, follow a campaign link, etc. Additional identification events can be pushed to accommodate other scenarios such as custom forms.
window.wtba.push({
"type": "identify",
"phone": "17133468424",
"email": "joe.doe@example.com"
})You can provide both phone and email or just one of them.
Tracking customer login/logout
Login:
window.wtba.push({
"type": "customer",
"event": "customer_login",
"customer": { "phone": "17133468424", "email": "joe.doe@example.com" }
})You can provide both phone and email or just one of them.
Logout:
window.wtba.push({
"type": "customer",
"event": "customer_logout"
})Tracking page/product views
Tracking homepage view:
window.wtba.push({
"type": "home"
})Tracking product view:
window.wtba.push({
"type": "product",
"id": "00000001", // product id
"variant_id": "10000001" // optional
})Tracking added to cart events
window.wtba.push({
"type": "event",
"event": "product_added_to_cart",
"id": "00000001", // product id
"variant_id": "10000001" // optional
})Tracking orders
Your thank you page is a good place to track orders.
window.wtba = window.wtba || []
window.wtba.push({
"type": "order_created",
"order_id": "00000123",
})API reference
When loaded, the web-tracker script will expose the public SDK in the smsbump global that is intended to be used by store owners/developers. Remember, these will only work if the library is fully loaded.
| Item | Type | Description |
|---|---|---|
| smsbump.config([value]) | Object / * | Config namespace and bulk setter |
| smsbump.config.set(option, value) | boolean | Sets a config option |
| smsbump.config.get([option]) | * / Object | Gets a config value by option name |
| smsbump.isIdentified() | boolean | Is customer identified |
| smsbump.identify(payload) | Promise.<*> | Attempt visitor identification |
| smsbump.track() | Promise.<void> | Track visitor activity such as
|
| smsbump.subscribe(payload) | Promise.<boolean> | Subscribe visitor by phone and/or email. If the visitor is successfully subscribed or is already a subscriber, they will also be identified. |
config([value]) ⇒ Object | *
Config namespace and bulk setter using object notation.
If value is omitted, this is basically an alias on config.get() will get you the whole config object.
| Param | Type | Props |
|---|---|---|
| [value] | Object | store |
set(option, value) ⇒ boolean
Sets a config option.
Returns: boolean - true if option is successfully set, otherwise false
| Param | Type | Description |
|---|---|---|
| option | string | Option name |
| value | string | Option value |
smsbump.config.get([option]) ⇒ * | Object
Gets a config value by option name.
| Param | Type | Props |
|---|---|---|
| [option] | string | Option name |
If value is omitted, it will get the whole config object.
smsbump.isIdentified() :boolean
Whether or not customer is identified.
smsbump.identify(payload) ⇒ Promise.<*>
Attempt visitor identification.
| Param | Type | Props |
|---|---|---|
| payload | Object | email, phone |
smsbump.track() ⇒ Promise.<void>
Track visitor activity such as page/product view, added-to-cart, checkout, etc.
Returns: Promise.<boolean> - resolves to true if successful, otherwise false.
| Param | Type | Description |
|---|---|---|
| event | string | Custom event name |
| payload | Object | Custom event data |
smsbump.subscribe(payload) ⇒ Promise.<boolean>
Subscribe visitor by phone and/or email. If visitor is successfully subscribed or is already a subscriber, they will also be identified.
| Param | Type | Props |
|---|---|---|
| payload | Object | phone, email, form_id, source, country |
form_id - The ID of the form as it exists in SMS & Email web app.
Examples
Identify a visitor by page views
if (window.smsbump) {
smsbump.identify({ phone: '02025550157' }).then(() => {
console.log('Visitor identified by phone.')
}).catch(() => {
console.log('Could not identify by phone.')
})
smsbump.identify({ email: 'john.doe54@gmail.com' }).then(() => {
console.log('Visitor identified by email.')
}).catch(() => {
console.log('Could not identify by email.')
})
}Track page views
if (window.smsbump) {
if (smsbump.isIdentified()) {
smsbump.track('pageview').then(() => {
console.log('Successfully tracked identified visitor.')
}).catch(() => {
console.log('Failed to track visitor.')
})
}
}Add a subscriber
if (window.smsbump) {
smsbump.subscribe({
phone: '02025550157',
form_id: '5133', // optional but recommended
}).then(() => {
console.log('Visitor subscribed!')
}).catch(error => {
console.log('Failed to subscribe a visitor: ' + error)
})
}Was this article helpful?
