Third-Party Applications

You can integrate third-party applications such as product reviews, geotracking, Facebook, and Google Pay with Salesforce B2C Commerce.

You can integrate a third-party product review application into Salesforce B2C Commerce. The Storefront Reference Architecture (SFRA) includes a product decorator function that you can modify to meet your requirements.

The rating function is located in the following SFRA file:

The object property decorator function (value) generates a random rating based on the product ID. Replace the following code with a call to get the rating:

Salesforce B2C Commerce supports geotracking through the IP address customer lookup feature.

You can use the dw.util.Geolocation class and dw.system.Request.getGeolocation() method to populate the pdict.CurrentRequest.httpRemoteAddress, then take action based on the associated country.

If the IP address is associated with a country you support with one of your sites, redirect to that site. If the IP address is associated with a country you don’t support with one of your sites, you can direct to a "site selector" page. The site selector page lets the visitor select a specific site by region. If you let a visitor explicitly select a site, consider also offering the option of saving a cookie to remember the selection for subsequent sessions.

On subsequent visits, if a cookie on the browser's computer indicates that the customer has previously selected a preferred site, your app can redirect to that site regardless of the IP address. If you provide cookie-based site preference, it's important to let the visitor change that preference. Present a link to the site selector page in the global user interface of the site. Geotracking can be used to delegate users from specific countries to country-specific landing pages.

Alternatively, check our LINK partners for pre-built integrations with geotracking functionality.

Apple Pay on the Web can help convert mobile shoppers into mobile buyers. Apple Pay decreases friction in an ecommerce transaction, especially on iPhones, iPads, and Macs. Salesforce B2C Commerce supports Apple Pay on the Web Version 1.

Merchants can incorporate the ability to pay using Apple Pay on their storefront. Merchants can determine whether to show the Apple Pay button on their Product Detail Pages, Cart, and mini-Cart. The Apple Pay on the Web feature is enabled by default.

When Apple Pay is enabled on a merchant's storefront, the customer can click the Apple Pay button. Customers then use their iPhones to complete payment, just as they would in the store.

Integrating Apple Pay on a site involves:

• merchant use of B2C Commerce functionality
• engagement with Apple
• use of a participating payment service provider (PSP)

For B2C Commerce merchants, the process of enabling Apple Pay depends on how their PSP enables Apple Pay on the Web. There are two possibilities:

• the PSP uses the B2C Commerce API to implement Apple Pay

  In this case, the merchant configures Apple Pay on the Web in Business Manager.

• the PSP supports Apple Pay on the Web via their LINK cartridge

  In this case, the merchant installs and configures the updated LINK cartridge and provides some configuration information in Business Manager.

There are several entities involved in enabling and using Apple Pay on B2C Commerce merchant sites:

• B2C Commerce merchant (merchant)

  If the merchant already uses a supported PSP, they simply configure Apple Pay on the Web in Business Manager.

• Payment Service Provider (PSP)

  B2C Commerce provides the API interface and works directly with key PSPs to enable Apple Pay on the Web. Each PSP determines whether to support this capability and which integration method (standard API or updated cartridge) they wish to support.

• B2C Commerce merchant's customer (shopper)

The shopper's experience depends on what device they’re using:

• iPhone or iPad experience: If the shopper has Apple Pay on their iPhone or iPad, they see the Apple Pay button on the pages where the Merchant has added it. The shopper can then begin the checkout and payment process. The shopper taps the Apple Pay button and confirms the order details (payment, shipping option, totals) in the Apple Pay payment screen. The shopper completes the purchase via Touch ID or passcode.
• Mac experience: To pay using Apple Pay, the shopper must be browsing the site on a 2012 or newer Mac desktop or laptop, running Safari. The shopper must have an iPhone or Apple Watch with Apple Pay setup. While browsing using Safari on their Mac, the shopper clicks the Apple Pay button and confirms the order details in the Apple Pay payment screen. The shopper then uses their iPhone or Apple Watch to complete the purchase via Touch ID or by clicking the side button on their Apple Watch.

To ensure that the transaction is secure, Apple verifies the domain association. The verification occurs one time, although reverification can occur again later. For every payment request, Apple verifies the server source of the request using TLS validation through the session validation key. Apple encrypts the payment data with the encryption key.

The merchant runs any verification they need on the billing address, just as they would for a non-apple Pay transaction. The billing address information can be provided with the payment object as non-encrypted and isn't required for the processing of Apple Pay transactions.

Process Flow

1. Shopper visits the storefront using an Apple Pay on the Web enabled device.
2. The storefront detects the device and other conditions necessary for Apple Pay and, if all conditions are met, shows the Apple Pay button.
3. The shopper clicks the Apple Pay button.
4. The storefront provides the necessary information to Apple Pay.
5. The shopper checks out using Apple Pay.
6. The storefront updates the basket with Apple Pay information.
7. The shopper authorizes payment on their Apple Pay enabled device.
8. Apple Pay provides the storefront with encrypted payment information.
9. The storefront makes the authorization request to the PSP.
10. The storefront stores the transaction ID that is in the authorization response from the PSP.
11. The storefront notifies Apple Pay of successful authorization.
12. The storefront shows the order confirmation.
13. The order, including the PSP transaction ID, is exported to the OMS.
14. The OMS sends post order updates to the shopper.

The merchant can use a PSP that has enabled Apple Pay for use on B2C Commerce sites using the Standard Payment API from B2C Commerce. Alternatively, the merchant can use a LINK cartridge to enable Apple Pay for storefronts.

The standardized B2C Commerce and PSP Apple Pay integration model creates a seamless enablement process for B2C Commerce merchants to enable Apple Pay. This approach requires minimal client code customizations or LINK cartridge updates. In Business Manager, the merchant identifies the PSP to use, and the API version, API URL, API username and password, and PSP merchant account ID.

If the site is using a LINK cartridge, to enable customers to pay using Apple, the merchant updates the LINK cartridge for payment.

No matter which method the merchant uses to implement Apple Pay for the Web, the merchant must:

• have at least one storefront in a location where Apple Pay is supported

• register for an Apple Merchant ID

  Apple recommends that merchants who already have a Merchant ID use the same Merchant ID and certificate to support Apple Pay on the web. You enter the merchant ID into Business Manager.

• generate an Apple certificate

  The PSP gives the merchant a certificate request which they upload to the Apple developer portal to generate the certificate.

• configure Apple Pay for the Web in Business Manager

1. Log in to developer.apple.com.
2. Create an Apple Merchant ID.

1. Obtain a CSR (certificate signing request) file from your PSP.

2. Use this CSR to generate a certificate through Apple.

   For details, browse to https://developer.apple.com/support/apple-pay-domain-verification/.

3. Upload the certificate back to your PSP.

To enable Apple Pay for use on B2C Commerce sites using the Standard Payment API from B2C Commerce, the merchant must configure Apple Pay in Business Manager.

You must enable the Apple Pay on the Web feature in Business Manager. You can later delete the configuration. Configuration information is deleted only for the instance type currently selected in the dropdown and not others.

Ensure that host name aliases are configured properly, as detailed in Hostname Aliases.

1. Select Merchant Tools > Site Preferences > Apple Pay.

2. Select the environment that you want to configure (Production, Staging, Development).

3. Check Apple Pay Enabled?.

4. Enter your Apple Pay Merchant ID that you created or that you already use for Apple Pay.

5. Enter your Apple Merchant Name, which appears on the payment sheet.

   This value is the brand name you would like to appear on the payment sheet.

6. Enter the Country Code for the locale of your site.

   The country code is a two letter ISO 3166 country code.

7. For Merchant Capabilities, check 3DS and leave other fields unchecked.

8. Select the types of payment you support.

   The payment types are sent to Apple Pay on button click and accepted by the sheet as valid payment types. Shoppers can submit a payment only with a card in one of the accepted payment types. It's up to the PSP what types are supported.

9. Select the Supported Networks.

   The networks are sent to Apple Pay on button click and accepted by the sheet as valid payment networks. Shoppers can submit a payment only with a card in one of the accepted payment networks (Discover, Visa, or other network). It’s up to the PSP what networks are supported.

10. Select the Required Shipping Address Fields that are required on the shipping forms.

11. For the Required Billing Address Fields select Name and Postal Address.

12. For Use Commerce Cloud Apple Pay Payment API? check Yes.

13. Check whether to place the Apple Pay button on the cart and mini-cart pages.

14. Select whether to enable automatic redirect of product detail pages to HTTPS.

    Because pages where the Apple Pay button appears must be served via HTTPS, it might be necessary to redirect certain pages on your site. Only pages that don't contain "sc.html" in the URL can be redirected using HTTPS redirection. Because of this, enabling HTTPS redirection might not result in the Apple Pay button appearing on all the pages you expect it should.

15. Specify Payment Provider URL.

16. Specify Payment Provider Merchant ID.

17. The API Version is v1.

    This version is the version of the B2C Commerce Apple Pay PSP API that is specified by Salesforce and implemented by PSPs. In addition, there’s the Apple Pay JS API provided by Apple in Safari. B2C Commerce supports only version 1, not the later versions that Apple has made available.

18. If you’re using Cybersource, leave Use Basic Authorization? unchecked. However, if you’re using World Pay or Adyen, check Use Basic Authorization?.

19. If you checked Use Basic Authorization, enter the username and password for the merchant issued by the payment provider.

20. Enter the identifier for the merchant issued by the payment provider.

21. If you’re using Cybersource, for Use JWS? Check Yes. If you’re using World Pay or Adyen don't check Yes.

22. If you checked Yes for Use JWS?, for JWS Private Key Alias enter the merchant’s .p12 Key Alias. The private key alias is created when a merchant uploads their .p12 key file to Business Manager Module, Private Keys and Certificates. This private key can be obtained by going to Cybersource Business Center -> Account Management -> Transaction Security Keys -> Security Keys for Simple Order API.

23. Click Submit.

    After you click Submit, a domain name appears in the Registration section. If you don't have an alias registered, a domain similar to one of the following appears:

    • staging-merchant.<domain>
    • production-merchant.<domain> If you do have an alias registered, the domain is something like mystore.com.

24. Register with the Apple sandbox or the Apple production server.

    You need just one merchant ID to register with both servers. If your domain is registered with the Apple sandbox, the only device that can make payments on that domain is a device that is signed in to an iCloud Sandbox Tester Account; if your domain is registered with the Apple production server, any regular iCloud account can pay on that site. If you configure HTTPS, the HTTPS host name is used instead of the instance domain name. If you have multiple domain names for your site, you can register them; contact Commerce Cloud Support for details.

    Apple lets multiple domains be registered for the same Apple merchant ID. To register multiple domains, set the HTTPS URL, register it with Apple Pay, and repeat for any number of domains. When registration is complete, you can remove the HTTPS URL from the Aliases screen

You can use several different methods to inject the Apple Pay button into the storefront.

The Apple Pay button can be either:

• automatically injected in the storefront via configuration

  When the shopper's browser supports Apple Pay and there’s a place in the page for a button to be injected, Salesforce B2C Commerce determines if it's appropriate to inject the button. If so, iB2C Commerce inserts the Apple Pay button on the page.

• injected manually by a storefront developer

  B2C Commerce supports customization of the storefront presentation of the controls to initiate payment via Apple Pay. This customization includes not only where the button appears, but also how the button should look, and if a product is to be added to the basket before checkout commences.

  The Apple Pay button is injected when:

  • The browser supports Apple Pay payment
  • The page contains configured places to show an Apple Pay button
  • The customer basket and additional information from the B2C Commerce server indicate that Apple Pay payment is supported The Apple Pay button should never be unavailable. The web page should prompt the user to provide the additional information if the user taps the button without completing their input selection. That prompt should guide the user to the part of the form that requires completion. For details, you should review the Apple Human Interface Guidelines and success stories to design your UI and UX for Apple Pay on the web.

A new tag ( <isapplepay> ) is added to ISML to inject an Apple Pay control in the HTML page supports optional attributes to:

• add the product to the basket
• specify the look of the button, among possible choices
• specify the ID of the element

The <isapplepay> tag must have a closing tag.

If there are already items in the shopper's basket and they click the Apple Pay button for an individual product, the items currently in the basket are stored temporarily during the purchase of the individual item; the original items are then restored to the basket.

There are two places where a button can be injected via configuration:

• Cart
• Mini Cart

Each is represented by a CSS selector plus additional information about how to inject. The CSS selectors are based on SiteGenesis DOM and CSS class names, but can work on sites other than SiteGenesis.

If a site is configured to inject, one of these selectors finds a match, and the SYSTEMApplePay-GetRequest pipeline responds with a valid JSON for an ApplePaySession payment request, the button is injected. These buttons check out the current basket (as opposed to buttons to buy a single specific product) so the basket must not be empty to inject the button.

For Cart, the Apple Pay button is injected after “button[name=dwfrm_cart_checkoutCart]” and its margin and width are copied for Apple Pay UI guidelines reasons. The CSS classes “dw-apple-pay-button” and “dw-apple-pay-cart” are put on the injected button, and (if necessary) a CSS class corresponding to the configured button style.

For MiniCart Commerce Cloud appends to “.mini-cart-totals”. Margin, width, or any other attributes aren’t copied. Commerce Cloud puts “dw-apple-pay-button” and “dw-apple-pay-mini-cart” plus configured style CSS classes. Not all sites support automatic injection, and sites that do support automatic injection might find they don’t like the way the button is automatically injected. In that case, a customer developer should choose where to inject by using <isapplepay></isapplepay> in their templates.

The process of injecting the Apple Pay button is as follows:

If the merchant enables Apple Pay through a LINK cartridge, the merchant must meet minimum requirements.

The merchant must:

• have a supported iOS device

• create an Apple Developer account

• become a member of the iOS Developer program

• be running Xcode 6.1 or later

  In Xcode, enable Apple Pay under Capabilities in your Project Settings and enable both Apple Merchant IDs.

• update the LINK cartridge

B2C Commerce provides the constant METHOD_DW_APPLE_PAY to the new Apple Pay system Payment Method.

B2C Commerce provides hooks for payment authorization:

• dw.extensions.applepay.getRequest
• dw.extensions.applepay.prepareBasket
• dw.extensions.applepay.shippingContactSelected
• dw.extensions.applepay.shippingMethodSelected
• dw.extensions.applepay.paymentAuthorized.createOrder
• dw.extensions.applepay.paymentAuthorized.authorizeOrderPayment
• dw.extensions.applepay.paymentAuthorized.placeOrder
• dw.extensions.applepay.paymentAuthorized.failOrder
• dw.extensions.applepay.cancel
• dw.extensions.paymentapi.beforeAuthorization (If not implemented, custom data will not be included in the request or handled in the response as before.)
• dw.extensions.paymentapi.afterAuthorization (If not implemented, custom data will not be included in the request or handled in the response as before.)

The API class dw.extensions.applepay.ApplePayHookResult indicates error reasons.

The <isapplepay> ISML tag injects a default black Apple Pay button into the HTML page.

You can use the following CSS class names on pages where Apple Pay for the Web is enabled:

• dw-apple-pay-button
• dw-apple-pay-mini-cart
• dw-apple-pay-cart
• dw-apple-pay-logo-white
• dw-apple-pay-border

You use the Apple Pay Sandbox to test integration and payment sheet configuration. For more details, see Apple Pay Sandbox Testing (at https://developer.apple.com/support/apple-pay-sandbox/).

Salesforce B2C Commerce provides the API interface and works directly with key PSPs to enable Apple Pay. Each PSP determines whether to support this capability.

The PSP sets up an endpoint that can accept the request from B2C Commerce. The B2C Commerce server makes a call to the PSP to enable them to authorize the payment. The PSP puts the request into a format that they can accept, if necessary. The PSP returns the response in the correct format to the B2C Commerce server.

Alternatively, PSPs can update their LINK cartridge.

Each PSP determines which integration method (standard API or updated cartridge) they wish to support.

To handle Apple Pay payments, the merchant sends a request to the PSP. The PSP handles the request, and returns a response and an HTTPS status.

In the request for authorization from the PSP, the following is passed. For Apple Pay, the merchant should request only the fields that are required to process the transaction.

A sample request is as follows:

The response is as follows:

A sample response for authorization appears as follows:

A sample response for refusal appears as follows:

A sample response for an error appears as follows:

A sample response that includes customization appears as follows:

The HTTPS statuses include:

B2C Commerce provides Apple Pay with information about the customer and basket: line items, shipping methods, and stored contact information. When the shopper authorizes payment, Apple Pay provides B2C Commerce with a token containing the encrypted payment information.

B2C Commerce creates an order from the basket, and provides the encrypted payment information to the storefront payment service provider in an authorization request. B2C Commerce updates the order with the transaction information in the authorization response.

B2C Commerce provides Apple Pay with the outcome of the authorization, and if successful, shows the storefront order confirmation page.

To authorize Apple Pay payment:

1. The shopper clicks or taps the Buy with Apple Pay button.
2. B2C Commerce creates the payment request.
3. B2C Commerce creates a merchant session, requested from the B2C Commerce Web Server to Apple.
4. The session is returned to B2C Commerce and is forwarded with the payment request.
5. The app shows the Apple Pay sheet.
6. The shopper uses their Touch ID or passcode.
7. Payment data is generated.

The Apple Pay payment processing authorization process looks as follows:

The following is an example of merchant validation:

1. A valid merchant DOM event is dispatched to the session.
2. The event has a validationURL property.
3. Validation is performed.
4. Call completeMerchantValidation.

The following is an example of authorizing payment:

Payments made using Apple Pay are processed in the usual manner through a merchant's PSP.

Use of Apple Pay doesn’t change fulfillment or customer service, and the like. The merchant continues to own the relationship with the customer, including all aspects of fulfillment and customer service.

Use of Apple Pay doesn’t change how returns are handled. The merchant’s business handles questions about orders or returns. The PSPs provide all transaction information needed for returns as for all other transactions.

As long as the merchant continues to use the same PSP, no changes are required to the order management system or the payment settlement process.

Existing B2C Commerce storefront capabilities or integrations are used for shipping and tax calculations. If the merchant uses B2C Commerce tax tables, for example, these tables work “out of the box” after enabling Apple Pay.

Chrome and other major browsers are retiring support for third-party cookies, which negates the effectiveness of the current pixel-based tracking needed for the Facebook Dynamic Ads feature. To address this change, Salesforce now provides server-side activity tracking for Facebook.

When enabled in Business Manager, server-side activity tracking for Facebook completes the following process.

1. Collects shopper viewPage, viewProduct, addToCart, and Finish checkout events using the existing Commerce Cloud Einstein tracking mechanism.
2. Transforms the events to the Facebook format.
3. In real time, sends the events to the Facebook Conversions API.

To enable the server-side activity tracking and use the Facebook Conversion API with your B2C Commerce instance, you must:

• Integrate your instance of B2C Commerce with a Facebook Business Manager account
• Enable Commerce Cloud Einstein tracking in your B2C Commerce instance
• Set up server-side tracking for Facebook in Business Manager

Set Up Server-Side Activity Tracking for Facebook

If you inject the Facebook pixel using B2C Commerce, you can set up server-side tracking for Facebook.

When server-side activity tracking for Facebook is enabled in Business Manager, B2C Commerce uses the existing Commerce Cloud Einstein tracking that collects shopper activities. Commerce Cloud Einstein data is converted to the Facebook format and sent server-side to Facebook.

1. In Business Manager, select Merchant Tools > Site > Site Preferences > Facebook.

   The Facebook option is available only after you integrate your B2C Commerce instance with Facebook.

2. Under Local Configuration, select Enable Server-side Activity Tracking using Conversions API.

3. In Facebook Business Manager, navigate to Events manager, select the desired pixel, and click the Settings tab.

4. Under Conversions API, select Generate access token, and copy the token.

5. In Business Manager, navigate to Merchant Tools > Site > Site Preferences > Facebook, and paste the token in the Pixel Conversions API Token field.

6. Click Submit.

   After configuring, data pushed to Facebook is available through your Facebook Business Manager account.

Salesforce B2C Commerce's integration of Facebook Dynamic Ads allows merchants to quickly and easily get started using the Facebook Dynamic Ads product.

The B2C Commerce integration to Facebook Dynamic Ads lets you embed the Facebook Tracking Pixel into your site, and generates a daily product catalog feed, which is exported to Facebook. Merchants can then create ads for products, which appear on Facebook. (When you place ads, you place them in Facebook not Business Manager.)

The Facebook Pixel integration to support Dynamic Ads now automatically tracks:

• PageView
• ViewContent
• AddToCart
• Purchase

To take advantage of tracking these events, Facebook must be enabled for your site and Facebook Pixel injection must also be enabled.

To complete integration:

• Commerce Cloud Business Manager: (done by a user with Admin access to Facebook Business Manager)

  1. Enable Facebook integration – pixel injection for the specified environment (production)

     You can have only one instance of the Facebook pixel on your site. If you previously integrated the pixel, but want to use the Commerce Cloud integration, you must back out the current pixel code. Alternatively, if you want to continue with your existing pixel you can opt to export only the product catalog to Facebook. Disable Automatically inject Facebook Pixel code in site when you configure the feed in Business Manager.

  2. Complete the Facebook Business Account settings – You must have access to this information (Facebook Business Account ID, Page ID, Pixel ID. Get this information from the Facebook Business Manager setup.)

  3. Complete the setup of the Product Feed Configuration, including identifying which products are in the feed

     You configure Facebook on each instance independently, or use site import or export to copy configuration data from instance to instance. You can export and import configuration data of the Facebook integration through site import or export. You can customize the feed by performing any necessary post processing using B2C Commerce hooks

• Facebook Business Manager Activity:

  1. Create a Facebook Business account and accept the Terms and Conditions.

     Create the Facebook Business Account, the Facebook Page, the Facebook Ad Account, and the Facebook Pixel.

  2. Create retargeting campaigns in Facebook Business Manager.

  3. Buy Ads for this campaign

To integrate with Facebook, create a Facebook Business Manager account and a Facebook page.

1. Create the Facebook Business Manager account by browsing to https://business.facebook.com and clicking Create Account.

2. Create a Facebook page.

   If you’ve already integrated with Facebook, you might have multiple Facebook "page" objects for which you would like to have one shared Facebook product catalog. However, because a product catalog is owned by a single Facebook page, you have to choose which page to integrate with B2C Commerce.

3. Ensure the daily product feeds to Facebook contain the merchant’s product catalog and match what is expected by Facebook.

4. Create a catalog in Facebook.

B2C Commerce enables you to write catalog feed files in a Facebook supported format. You can customize feed exports by using hooks, which you implement in a custom cartridge you create. Typically, products feeds reach Facebook Business Manager within 24 hours.

1. Select site > Merchant Tools > Site Preferences > Facebook.

2. Check Enable Integration.

3. Enter your site information. Ensure that products that are enabled, online, have both pricing and a Product Image View Type specified to be able to create a product feed.

4. Click Submit.

5. To run a feed immediately, click Run Now.

   When you run a feed, Business Manager shows the status of the product feed, including the number of products in the Facebook catalog, and any errors or warnings raised by Facebook for the products in the feed. The errors and warnings include the cause of the problem and how to fix them. Typically, any product with an error isn’t exported. Files with warnings are often exported, but still need attention.

6. To download the most recent export log file, click Download Log File.

7. To configure a feed:

   1. Click + next to the existing feed tabs.

   2. Enter the Feed ID.

   3. Select the Channel Type, which specifies whether the feed is for use in Facebook or Instagram.

   4. Enter the Facebook Product Feed ID.

   5. Select the Country Code.

   6. Select the Product Redirect Action, which specifies whether to add the product to the cart or show the Product Detail Page when the customer clicks the product link.

   7. Click Submit.

You can specify whether to include products on a site when you configure the Facebook product feed.

Before you configure your Facebook feed, make sure your products are eligible. Products that meet the following criteria are eligible for Facebook feed.

• Product isn’t:
  • A base product
  • A product bundle
  • A product set
  • An option product
• Base product or variation isn’t disabled at the site level
• Product is accessible from the storefront

To include or exclude a product from the product feed:

1. Select site > Merchant Tools > Products and Catalogs > Products.
2. Search for and select the product.
3. To change the default for this product, click All Site Values.
4. Specify the default value for this product for all sites.
5. To change the default for this product on an individual site, unselect Use Default and select the value to use for that site.
6. Click Apply.

The following fields can be included in the product feed for any item for sale on Facebook. The values in the Commerce Cloud Value column represent what is copied into your feed by default without custom code.

dw.extensions.facebook.FacebookProductdefines a data structure that contains the Facebook representation of a B2C Commerce product. The product is passed to a hook you can use to customize the default transformation of a product in the B2C Commerce schema to the Facebook catalog feed export schema.

In addition, a customization hook, com.demandware.plugin.facebook.FacebookFeedHooks, is included for optional implementation in customer custom cartridges. This interface defines the hooks that can be implemented to customize the data included in Facebook feed exports.

|Name|Signature|Description| |dw.extensions.facebook.feed.transformProduct|dw.system.Status transformProduct( dw.catalog.Product product, dw.extensions.facebook.FacebookProduct facebookProduct )|Called after default transformation of given Commerce Cloud product to Facebook product as part of the catalog feed export.|

The feed export generates a Facebook tab-delimited file. You can implement the hooks described previously to customize the default transformation from Product system attributes.

Example

Following is an example of how to define a hook to map product attributes to Facebook product feed attributes:

1. In a custom cartridge, include a file package.json at the root (sibling to the "cartridge" folder containing "scripts", "templates", and the like, with this content:

   If a custom cartridge registers other custom hook implementations, the JSON file already exists.

2. In that custom cartridge, include a file hooks.json in "cartridge/scripts" with this content:

   If a custom cartridge already registers other custom hook implementations, instead of performing this step, add the object with "name" and "script" to the existing array of registered hooks, for example:

   {
     "hooks": [
       {
         "name": "some.other.hook.name",
         "script": "./some-file.js"
       },
       {
         "name": "dw.extensions.facebook.feed.transformProduct",
         "script": "./facebook.js"
       }
     ]
   }
   

3. In that custom cartridge, include a file facebook.js in the cartridges/scripts folder with this content:

   You can put whatever code you want in the exports.transformProduct function. The code in the example is just to show how it works.

   The parameters to the hook function are specified in the FacebookFeedHooks Script API documentation:

   • The first parameter is a standard dw.catalog.Product API object to be mapped
   • The second parameter is a dw.extensions.facebook.FacebookProduct API object
   • The FacebookProduct is an object representation of a row in the feed.
   • The Script API documentation for FacebookProduct specifies what attributes it contains, thus what we support to be included in a Facebook product feed.
   • There are constants available in FacebookProduct for the values that Facebook supports for columns with enumerated values, such as condition ("new", "refurbished", and "used").
   • The FacebookProduct passed to this function already has values set based on a default mapping B2C Commerce performs. A developer can set values in a FacebookProduct to override the B2C Commerce default mapping, or supply a value for a field that Commerce Cloud doesn't map by default, such as shipping weight or custom label 0-4. Consult Facebook documentation for what the fields mean, and the constraints placed on them by Facebook.
   • The hook function is only called for products that are enabled for Facebook in Business Manager. If the Enabled checkbox is checked in the Facebook cofiguration page in Business Manager, all products in the storefront catalog are included in the feed except products that are explicitly excluded using the site-specific system attribute named "FacebookEnabled". If unchecked, products to include in the feed must be explicitly included using the "FacebookEnabled" attribute.
   • The Facebook feed export job automatically skips rows that don't have the values required per Facebook documentation. If a row is skipped for this reason, its SKU is logged in the export job log. These logs are in the Impex logs area like other export logs. You don't have to use the script name "facebook.js" to contain the hook. However, if you already have hooks in your custom cartridge that are all implemented in an existing script file, you could add this Facebook code in that script file and not create a new one.

You can use Instagram to acquire and interact with B2C Commerce customers.

Refer to Instagram Shopping with Commerce Cloud for more information.

To enable centralization of product catalog synchronization and optimize audience engagement with TikTok users, integrate TikTok for Business with your SiteGenesis or Storefront-Reference-Architecture (SFRA) site.

TikTok for Business requires that you have a SiteGenesis or Storefront-Reference-Architecture (SFRA).

You also need:

• A Salesforce Commerce Cloud site catalog
• A Salesforce Commerce Cloud business user account
• A Salesforce Commerce API client setup within Account Manager

TikTok for Business requires that you have a SiteGenesis or Storefront-Reference-Architecture (SFRA).

To clone the repository, you need access to the Salesforce CommerceCloud repositories on GitHub. If you don’t have a GitHub account, see Salesforce Commerce Cloud GitHub Repositories and Access.

1. Sign in to Salesforce CommerceCloud GitHub.

2. To copy the repository to your local system, search for the Social Channels Integrations repository, and click Clone.

   To integrate with TikTok for Business, you need two cartridges:

   • bm_socialchannels: This cartridge contains the Business Manager controllers and UI logic for the Business Manager extension that a site administrator can use to integrate with different social channels like TikTok, and Snapchat.
   • int_tiktok: This cartridge contains the logic to integrate with TikTok. It includes the service definitions, logic to handle the customer object that stores the TikTok details, and the job that syncs the B2C Commerce product catalog with TikTok.

3. Upload the cartridges to your sandbox and import the metadata. Follow the instructions in the README file from the social_channels folder.

   Always install the cartridge in a staging instance, test the setup process with the staging Instance Id, orgId, and catalog. Then, replicate the code to production, change the instance Id, orgId in the setup process. Point staging and production instances to different catalogs, and pixels on TikTok. You can use the same business center account and TikTok Ad account.

4. Upload both bm_socialchannels and int_tiktok cartridges to your active code version.

5. Add bm_socialchannels cartridge to the Business Manager cartridge path.

   1. In Business Manager, select Administration > Sites > Manage Sites.

   2. On the Storefront Sites page, click Business Manager.

   3. Add int_socialchannelsto the cartridge path.

   4. Click Apply

6. Add int_tiktok cartridge to the Business Manager cartridge path.

   1. In Business Manager, select Administration > Sites > Manage Sites.

   2. From the list of sites, select your site.

   3. Click the Settingstab.

   4. Add int_tiktokto the cartridge path.

   5. Click Apply

      The export catalog job directly calls the TikTok API.

7. Zip the contents of the data folder and import the zip file.

   1. In Business Manager, select Administration > Site Development > Site Import & Export

   2. Click Choose File.

   3. Select the zip file and click Import.

8. Give permission to the TikTok for Business Manager menu to the required users.

You integrate TikTok for Business with your B2C Commerce SiteGenesis or SFRA storefronts.

1. Log in to your business TikTok account using the Advertising on TikTok page.

2. On the same computer, log in to Business Manager and select Merchant Tools > Social Channels > TikTok for Business.

3. Accept the data sharing agreements.

4. Complete Salesforce B2C Commerce and TikTok details form.

   Salesforce B2C Commerce Details

   • Account Manager Client id–The commerce API client you set up in Account Manager.

   • Account manager Client Secret–The secret for the API client.

   • Tennent Id–The realm_instance. For example, zzie_047.

   • Org Id–Available in Business Manager. Select, Administration > Site Development > Salesforce Commerce API settings TikTok Details

   • Email–The email for the marketing team that uses the account.

   • Phone–The phone number for the marketing team that uses the account.

   • Country Code–The region where the website is set up.

   • WebSite URL–The URL for the site.

   • Industry Id–The industry for the site.

5. Click Launch.

   You’re directed to the TikTok for Business site where you previously logged in.

   

6. In the TikTok for Business site, select an account.

   

7. Click Connect Account.

   The TikTok for Business plugin and integration app is launched.

   

8. In the app, connect or create a business center.

   You can only connect to existing business centers for which you have admin or owner access permission.

   • To connect to an existing business center, click Connect.
   • To create a Business Center, click Create New.

9. Connect or create an ad account

   You can only connect to ad accounts for which you have admin or owner access permission.

   • To connect to an existing ad account, click Connect.
   • To create an ad account, click Create New.

10. Connect or create a pixel.

    You can only connect to a pixel for which you have admin or owner access permissions.

    • To connect a pixel, click Connect.
    • To create a pixel, click Create New. The pixel code isn't injected on your storefront. To enable event tracking, see Sync Shopper Activities and Monitor Web Events.

    

11. Connect or create a catalog.

    • To connect an existing catalog, click Connect.
    • To create a catalog, click Create New.

12. Click Finish Setup.

    

13. On the setup success screen, click Start Later.

    

    You’re redirected to the Business Manager, TikTok for Business screen. The screen lists the TikTok application details created or connected during the setup.

    

14. To launch, Click Manage your TikTok App.

    The Plugin Overview page is displayed. From the Plugin Overview you can launch ad campaigns, and get quick links to your TikTok for Business assets. For example, ad account, catalog sync status, and other settings.

To synchronize your product catalog with TikTok for Business, you enable a B2C Commerce job to send products to TikTok. Complete this process after you integrate B2C Commerce and TikTok.

1. In Business Manager, Select Administration > Operations > Jobs.

2. In the Search field, enter “TikTok-ExportCatalog job.”

   

3. Select and open the TikTok-ExportCatalog job.

4. Select the Job Steps tab.

5. Set ProductImageView Type to the view type that is set in the catalog.

   The value can be large or hi-res.

   

   You can find the value listed in the main catalog image settings.

   

6. Click Assign.

7. Select the Schedule and History tab.

   

8. Start the job or set a schedule and frequency.

   • To immediately start the job, click Run Now.
   • To Schedule the job, complete the Active and Run Time settings and click Run Now.

You can monitor the details of your TikTok export catalog with Manage your TikTok App.

1. In Business Manager, Select Merchant Tools > Social Channels > TikTok for Business.

2. Click Manager your TikTok App.

   The plugin and integration app is loaded.

   

3. Click Manage your TikTok App.

   The TikTok Catalog Manager opens.

4. Review the synced product details.

   

You can send shopper activities to TikTok, track conversions, and build custom audiences for optimized product discovery. Two options are available. Complete the TikTok for Business integration and sync your product catalog before you begin.

Events API Based tracking queues the events by storing them inside custom objects. Events call the TikTok batch API to push or send them to TikTik. The ViewContent event is the only real-time API call to TikTok.

1. To make sure you have the latest code changes for int_tiktok cartridge, pull the latest code version from GitHub.

2. Upload the code to your sandbox or instance. If you haven’t completed the TikTok for Business integration and synced your product catalog, complete those processes before you continue.

3. Import the metadata for the server-side event tracking. The files are in the data-pixel folder.

4. Add the int_tiktok_pixel cartridge to your cartridge path. The cartridge tracks the following events:

   • View Content (Product Show)
   • AddToCart (add item to carat)
   • InitiateCheckout (begin checkout)
   • CompletePayment (place order)

5. Enable or disable events tracked by the tiktok-settings custom object.

   1. In Business Manager, select Merchant Tools > Custom Objects > Custom Objects Editor.
   2. From the Object Type dropdown, select SocialChannels.
   3. From the object list, select the tiktok-settings object.
   4. Click Edit Selected. The tiktok-settings reflect how the TikTok for Business app links to TikTok. The Tracking section lists the toggles that you can enable or disable.

6. (Optional) Set the View Content event tracking. The default setting is None and the event isn’t queued. Setting the option to either Real Time or Queue Events, isn’t recommended for high traffic sites or during a flash sale. If you set the Queue Event option, run or schedule the TikTok-WebEvents-Push job more frequently. The job pushes the events to TikTok and clears the custom objects.

   When you deselect the Enable Events API Based Tracking all events are disabled.

   

   

7. When the setup is complete, use the Test Event Function to verify your event setup.

   

Embed the TikTok pixel into your site to send shopper activities into TikTok. For detailed steps, see TikTok documentation.

• int_tiktok exposes a hook app.template.htmlHead. You can use the hook to inject the TikTok pixel directly into an SFRA storefront that manually installs the pixel to a site. To enable the pixel, add the following code snippet in htmlhead.isml.

After you inject the TikTok pixel base code across the storefront, you can add event codes to track and report on specific user actions. You use both TikTok pixel base code and event scripts to successfully track and report conversions.

Use the Google Channels integration to list your local store product availability on Google Surfaces. If you use Salesforce Omnichannel Inventory(OCI), you can list inventory directly from your OCI service. Inventory exposure on Google Surfaces improves product discoverability, and drives foot traffic to your local stores.

The Salesforce Commerce Cloud (SFCC) social feeds cartridge for Google Surfaces enables you to publish to Google Surfaces:

• An entire site catalog, or a category of products.
• Information from inventory lists that are imported into Commerce Cloud.
• Information from the Omnichannel Inventory(OCI) service.
• List of stores with mapping to inventory lists.
• Price books for products in each store.

Before you configure Google Channels integration with B2C Commerce, complete the following prerequisites.

• Ensure you have met the required SFCC Prerequisites.
• Create a Google Merchant Account.

See Install Dependencies and Create dw.json.

If you used b2c-tools to install the cartridge, this step is complete. Start with Install Social Integrations using b2c-tools.

Upload the following cartridges.

• bm_socialchannels: This cartridge contains the Business Manager controllers and UI logic to provide a newBusiness Manager extension that the site admin can use to integrate with Google.
• int_google: This cartridge contains the logic to integrate with Google.
• bc_library: This library contains all shared code for various B2C Commerce community projects. Ported from demandware-library
• bm_socialfeeds: The custom feeds Business Manager module allows merchants to easily create catalog feeds according to their needs. The framework uses a powerful generic export model. The model ensures reliable performance while more feeds are added. The extension integrates with a Business Manager for easy modifications.
• int_socialfeeds: The custom feeds module allows merchants to easily create catalog feeds according to their needs. The framework uses a powerful generic export model that ensures reliable performance while more and more feeds are added.

1. From the root of the repo (social_channel_integrations), run: npm run code:upload:google to upload the bm_socialchannels, int_google, bc_library, bm_socialfeeds, and int_socialfeeds cartridges to your instance.
2. (Optional) Manually upload the cartridge. See Uploading SFCC Cartridges.

If you used b2c-tools to install the cartridges, the cartridge paths are already updated.

1. In Business Manager, select Administration > Sites > Manage Sites.

2. Select your site.

3. Click Settings.

4. In the Cartridges field, add the new cartridges. For example, path:int_socialfeeds:bm_socialfeeds:bc_library:bm_socialchannelsint_socialfeeds

   • bm_socialfeeds
   • bc_library
   • bm_socialchannels

5. Update your Site cartridge path:

   1. In Business Manager, select Administrations > Sites > Manage Sites.
   2. Select your site.
   3. Click Settings.
   4. In the Cartridges field, add the following cartridges.

   For example, path: int_google:int_socialfeeds:bc_library:app_storefront_baseint_google

   • int_google
   • int_socialfeeds
   • bc_library

If you used b2c-tools to install the cartridges, the cartridge paths are already updated.

To import common data, see Import Common Data.

If you use b2c-tools to install the cartridges, the cartridge paths are already updated.

Otherwise, to import google data, use one of the following options.

1. (Optional) Import with npm scripts.

   From the root of the repo (social_channel_integrations), run: npm run data:import:google

   The data files are uploaded and imported into the sandbox specified in your dw.json file.

2. (Optional) Use Business Manager to zip, upload, and import data.

   1. Zip the data/google/google_global folder
   2. In Business Manager, select Administration > Site Development > Site Import & Export.
   3. Click Browse and select the google_global.zip file. The file is at the root of the repo.
   4. Click Upload.
   5. Select google_global.zip
   6. Click Import.
   7. Click OK.

If you used b2c-tools to install the cartridges, the cartridge paths are already updated.

1. In Business Manager, select Administratio > Organization > Roles & Permissions.
2. Select the Business Manager user role to assign.
3. Click Business Manager Modules.
4. Select the Sites to which the assigned permissions apply.
5. Click Apply.
6. In the custom Objects > Custom Object Editor, assign the write permission.
7. In the Social channel list, locate the Google Channel and assign the write permission.
8. Click update.
9. Select the Organization tab and Apply the permissions settings.
10. In the Operations list, locate the Jobs and Jobs History listings and for each, assign the write permission.
11. In the Social Product Feeds Definition list, locate the Social Product Feeds listing and assign the write permission.
12. Click Update.
13. Click the WebDAV permissions tab.
14. Scroll to the Impex section and click Manage custom folders.
15. Enter src/feeds/export.
16. Apply your changes.
17. In the Impex listings, locate /impex/src/feeds/export/* and assign the write permission.
18. Update your changes.

If you use b2c-tools to install the cartridges, the cartridge paths are already updated.

To import common data, see Configure WebDAV Permissions.

1. From Business Manager, select Administration > Operations > Services.

2. Click Services, and select google.merchant.create.

3. Update the following credentials:

   • For sandboxed, Development, and Staging instances use google-surfaces-api-preprod.
   • For Production instances use google-surfaces-api-prod

4. Apply your changes.

5. Click Back to List.

6. Click Services, and select google.merchant.get.

7. Update the following credentials:

   • For sandboxed, Development, and Staging instances use google-surfaces-api-preprod.
   • For Production instances use google-surfaces-api-prod

8. Apply your changes.

Catalog feed configurations are based on the custom feeds module. To use the module, define a template and schedule the feed to run at desired intervals. Sites with multiple locations require one feed file per locale. Prices for each locale are generated from the price book associated with the currency assigned to the locale. Salesforce recommends that you schedule the job to run in parallel with changes to your catalog, and when you replicate to production.

1. In Business Manager, select Administration > Social Product Feeds > Product Feeds Definition.
2. Configure each field to meet your custom feed requirements. The default template values already represent the attributes that Google is looking for in the product feed.

1. In Business Manager, select Administration > Operations > Jobs

2. Click the Google-ExportFullFeeds job.

3. From the Jobs tab, select configure job steps.

4. Complete the ExportPriceBook form.

   1. Enter the PriceBook IDs.

   2. Enter the FileNamePrefix. For example, feeds/export/social/google/pricebook/pricebook.

   3. Select OverwriteExportFile.

   4. Assign your settings.

      

5. Complete the ExportInventoryLists form.

   1. Enter the InventoryList IDs. If the full list doesn’t fit, create a duplicate job step and split the list.

   2. Enter the FileNamePrefix. For example, feeds/export/social/google/inventory/inventory.

   3. Select OverwriteExportFile.

   4. Assign your settings.

      

6. Complete the ExportStores form.

   1. Enter the StoreID. Use the ID of the store to be exported or * to export all stores.

   2. Enter the FileNamePrefix. For example, feeds/export/social/google/inventory/inventory.

   3. Select OverwriteExportFile.

   4. Assign your settings.

      

7. Complete the ExportProducts FullFeed form.

   1. Select ExportCatalogs.

   2. Select GenerateDeleteFeed. A separate file is created for deleted products.

   3. Add the CustomObjectids. Use a comma to separate IDs

   4. Configure the Hostname.

   5. Assign your settings.

      

8. (Optional) From the Schedule and History tab, schedule the job to run.

9. (Optional) Click Run Now.

   

When you use Salesforce Omni Channel Inventory Integration for a store, the native inventory export doesn’t generate accurate inventory. To integrate Omnichannel Inventory, complete the steps in the Omnichannel Inventory Integration document.

When the integration steps are complete, remove the standard inventory export from the Google-ExportFullFeeds job.

1. In Business Manager, select Administration > Operations > Jobs.
2. Click Google-ExportFullFeeds.
3. Click Job Steps.
4. Delete the ExportInventoryList step.

To export store-specific prices, you assign price books to stores, see Assign a Price Book or Promotion to a Specific Store.

After price book assignments are imported, you can use the Google-StorePricing Export job to export store price books to Google.

1. In Business Manager, select Administration > Operations > Jobs.
2. Select Google-StorePricingExport.
3. Configure the job steps.
   1. Click Job Steps.
   2. Enter the ExportFile. For example, feeds/export/social/google/assignments/assignments.
   3. Select OverwriteExportFile.
   4. Assign your settings.
4. Configure GoogleLIA Store Pricing Export.
   1. Enter the folder path. For example, feeds/export/social/google.
   2. Select OverwriteExportFile.
   3. Assign your settings.

1. In Business Manager, check that Google-ExportFullFeeds has completed one or more runs.

   Check that the feed is available in the WebDAV folder, webdav/Sites/Imped?src/feeds/export/social/google/.

2. In Business Manager, select Merchant Tools > Social Channels > Google Channel.

3. Accept the terms.

4. Complete the Initialization form fields.

   • Name: Your business username.
   • Email: Your business email.
   • Country Calling Code: The business country calling code.
   • Phone: A business phone number.
   • Account manager Client ID: The client ID created in Account Manager.
   • Account Manager Client Secret: Client ID password.
   • Org ID: Salesforce Commerce API org ID. Find in Business Manager > Site Development > Salesforce Commerce API Settings.
   • Google Merchant Center ID: User ID established with Google. Find in the Google Merchant Center.

5. Submit your changes.