Sample Ecommerce Sitemap

1SalesforceInteractions.init({
2  consents: new Promise(resolve => {
3    const { OptIn, OptOut } = SalesforceInteractions.ConsentStatus
4    const purpose = SalesforceInteractions.ConsentPurpose.Tracking
5    const provider = 'Test Provider'
6    
7    // user clicks button that grants consent
8    document.getElementById('opt-in')
9      .addEventListener(
10        'click', 
11        () => resolve([{ purpose, provider, status: OptIn }]), 
12        { once: true }
13      )
14
15    // user clicks button that revokes consent
16    document.getElementById('opt-out')
17      .addEventListener(
18        'click', 
19        () => resolve([{ purpose, provider, status: OptOut }]), 
20        { once: true }
21      )
22  })
23}).then(() => {
24  // set the log level during sitemap development to see potential problems
25  SalesforceInteractions.log.level = 'debug'
26
27  const { 
28    cashDom,
29    listener, 
30    resolvers,
31    sendEvent,
32    util,
33    CartInteractionName,
34    CatalogObjectInteractionName,
35    OrderInteractionName,
36  } = SalesforceInteractions
37
38  const global = {
39    listeners: [
40      // capture email address when a user signs up
41      listener('submit', '.user-signup-form', (actionEvent) => {
42        const emailAddress = cashDom("#user_email").val()
43        if (emailAddress) {
44          sendEvent({ 
45            interaction: {
46              name: 'Email Sign Up'
47            },
48            user: {
49              attributes: { emailAddress }
50            }
51          })
52        }
53      })
54    ],
55    
56    // attach optional data to every actionEvent that is sent out
57    onActionEvent: (actionEvent) => {
58      const email = window && window._userInfo && window._userInfo.email
59      if (email) {
60          actionEvent.user = actionEvent.user || {}
61          actionEvent.user.attributes = actionEvent.user.attributes || {}
62          actionEvent.user.attributes.emailAddress = email
63      }
64      return actionEvent
65    }
66  }
67
68  const productIdResolver = resolvers.fromSelectorAttribute('.product', 'data-id')
69  
70  const productPage = {
71    name: 'product',
72    isMatch: () => /products/.test(window.location.pathname),
73    // capture the product being viewed when the page is opened
74    interaction: {
75      name: CatalogObjectInteractionName.ViewCatalogObject,
76      catalogObject: {
77        type: 'Product',
78        id: productIdResolver,
79        attributes: {
80          name: resolvers.fromSelector('.product-title'),
81          url: resolvers.fromHref(),
82          imageUrl: resolvers.fromSelectorAttribute('.product img', 'src')
83        },
84        relatedCatalogObjects: {
85          Color: resolvers.fromSelectorAttributeMultiple('.color-value', 'data-attr-value')
86        }
87      }
88    },
89    listeners: [
90      // capture when the user adds this product to their cart
91      listener('click', '.add-to-cart', () => {
92        sendEvent({
93          interaction: {
94            name: CartInteractionName.AddToCart,
95            lineItem: {
96              catalogObjectType: 'Product',
97              catalogObjectId: productIdResolver(),
98              quantity: parseInt(cashDom('.product .quantity input').val(), 10),
99              price: parseFloat(cashDom('.product .price').text().trim())
100            }
101          }
102        })
103      }),
104      // capture when the user shares the product to social media
105      listener('click', '.share', () => {
106        sendEvent({
107          interaction: {
108            name: CatalogObjectInteractionName.ShareCatalogObject,
109            catalogObject: {
110              type: 'Product',
111              id: productIdResolver()
112            }
113          }
114        })
115      })
116    ]
117  }
118
119  const cartPage = {
120    name: 'Cart',
121    isMatch: () => /^\/cart/.test(window.location.href),
122    listeners: [
123      // capture when a user removes an item from their cart
124      listener('click', '.remove-from-cart', (event) => {
125        const $cartItem = cashDom(event.target).parents('.cart-item').first()
126        sendEvent({
127          interaction: {
128            name: CartInteractionName.RemoveFromCart,
129            lineItem: {
130              catalogObjectType: 'Product',
131              catalogObjectId: $cartItem.attr('data-id'),
132              quantity: parseInt($cartItem.find('.quantity').text().trim(), 10),
133            }
134          }
135        })
136      })
137    ]
138  }
139
140  const orderConfirmationPage = {
141    name: 'Order Configuration',
142    isMatch: /\/confirmation/.test(window.location.href),
143    // capture when a user completes an order
144    interaction: {
145      name: OrderInteractionName.Purchase,
146      order: {
147        id: resolvers.fromSelectorAttribute('.order', 'data-id'),
148        totalValue: parseFloat(resolvers.fromSelector('.order .total').trim()),
149        lineItems: () => cashDom('.order .line-items').map((index, el) => {
150          const $lineItem = cashDom(el)
151          return {
152            catalogObjectType: 'Product',
153            catalogObjectId: $lineItem.attr('data-id'),
154            quantity: parseInt($lineItem.find('.quantity').text().trim(), 10)
155          }
156        })
157      }
158    }
159  }
160
161  const pageTypeDefault = {
162    name: 'default'
163  }
164  
165  SalesforceInteractions.initSitemap({
166    global,
167    pageTypeDefault,
168    pageTypes: [cartPage, orderConfirmationPage, productPage]
169  })
170})