Generic Yotpo SMS & Email Web Pixel Installation Guide

Prev Next

Products


SMS & Email
Supported plans

Free, Starter, Pro, Premium, Enterprise

eCommerce Platform

Custom

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 
  • page/product view (all platforms) 
  • added to cart (soon only for Shopify, TBD for other platforms)
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)
    })
}


Related articles