Generic Yotpo SMS & Email Web Pixel Installation Guide

      Generic Yotpo SMS & Email Web Pixel Installation Guide


        Article Summary

        Products


        SMS & Email
        Supported plans

        Free, Growth, Prime, Powerhouse, 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.

        ItemTypeDescription
        smsbump.config([value])Object / *Config namespace and bulk setter
        smsbump.config.set(option, value)booleanSets a config option
        smsbump.config.get([option])* / ObjectGets a config value by option name
        smsbump.isIdentified()booleanIs 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.

        ParamTypeProps
        [value]Objectstore

        set(option, value) ⇒ boolean

        Sets a config option.
        Returns: boolean - true if option is successfully set, otherwise false

        ParamTypeDescription
        optionstringOption name
        valuestringOption value

        smsbump.config.get([option]) ⇒ * | Object

        Gets a config value by option name.

        ParamTypeProps
        [option]stringOption 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.

        ParamTypeProps
        payloadObjectemail, 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.

        ParamTypeDescription
        eventstringCustom event name
        payloadObjectCustom 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.

        ParamTypeProps
        payloadObjectphone, 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?