Enabling the Cookie Contents target in React-based stores
In order to use the Cookie Contents target in web activities, you must modify the TypeScript (.TSX) file for the e-Marketing Spot widget.
Procedure
-
Find the name and location of the React.TSX file for the
e-Marketing Spot used in the web activity.
For example, in the Emerald React storefront code, find the file use-espot-helper.tsx in the default reference store location react-store/src/components/commerce-widgets/e-marketing-spot-widget/hooks.
- Open the .TSX file for the e-Marketing Spot in which you plan to display the targeted marketing content in any editor tool.
-
Locate the eSpotService JavaScript ajax call and the parameters JavaScript
object. For example:
const parameters: any = { storeId: storeID, name: eSName, catalogId: catalogID, widget: widgetName, query: { DM_ReturnCatalogGroupId: true, DM_FilterResults: false, … const res = await eSpotService.findByName(parameters);
-
Add a line of code to the file in order to assign the cookie name and value to
the marketing services parameters object. For example, if the name of the cookie
is ZIPCODE, then the line of code can be:
parameters.query["ZIPCODE"] = cookie.ZIPCODE.value;
- You can add the lines of code to the .TSX file to pass all cookie names
and values to the marketing services as shown in the following code
line. However, this is not the preferred method, as a large amount of
unnecessary data is
passed.
cookie.forEach((c)=>{ parameters.query[c.name] = c.value; });
- You can add the lines of code to the .TSX file to pass all cookie names
and values to the marketing services as shown in the following code
line. However, this is not the preferred method, as a large amount of
unnecessary data is
passed.
- Save and close the .TSX file.