Use Location-Based Dynamic Text and Click Zones

You can add location-based dynamic text and click zones to an image using Content Builder while creating a Web experience. The location-based dynamic text tokens use information from the locations list that you've uploaded to Content Manager.

Before you can use location-based dynamic text, you must upload a locations list to Monetate. If you plan to include a location-based click zone, then you must ensure that the locations list you've uploaded includes at least the optional URL1 attribute and a value for the locations in the list. See Upload a Locations List for instructions.

Follow these steps to create a Web experience with an image-based action that includes location-based dynamic text and a click zone with a location-based URL.

  1. Create a new Web experience.
  2. Configure the WHY settings.
  3. Configure the WHO settings using either the Distance to location or Distance to many locations target from the Location target type.

    Callout of the 'Distance to location' and 'Distance to many locations' target options on the Location target type panel of the WHO settings of a Web experience

  4. Click WHAT and then click ADD ACTION.

    Callout of the WHAT settings and of the ADD ACTION button on the Experience Editor page

  5. Select an action type category and then an action template that displays an image to customers who qualify for the experience.
  6. Click CHOOSE to select an image already uploaded to the account, or click UPLOAD to upload an image to the account.

    Callout of the CHOOSE button and of the UPLOAD button on an image-based action template

  7. If you clicked UPLOAD in the previous step, click EDIT to open the image in Content Builder.

    Callout of the EDIT button on an image-based action template

  8. If you clicked CHOOSE in step 6, then click EDIT IN CONTENT BUILDER in the Select Image modal.

    Callout of the EDIT IN CONTENT BUILDER button in the 'Select image' modal

  9. Add a text layer to contain any lead-in or framing text that doesn't include any dynamic text values or potential click zones. Click Add Layer, select Text, and then compose the text. Apply font styling as necessary.

    Putting lead-in or framing text in a layer and dynamic content values in another layer allows the fallback text to replace a dynamic content value that comes back empty without impacting the overall message of the creative.

    Callout of the Add Layer selector and the Text option in Content Builder

  10. Add the location-based dynamic text in one or more text layers.
    1. Click Add Layer, select Text, and then double-click the new text field to bring up the text toolbar. Click Add dynamic content, select a location-based option from Property, and then click OK.

      Animated demonstration of a user clicking the Add Layer selector, selecting Text, then double-clicking the new text field, clicking the 'Add dynamic content' button on the text toolbar, and then selecting the Closest Location Name option from the Property selector

    2. If necessary, select from Property each additional dynamic text option that you want to add to the image.

      You can add multiple options per layer or limit each layer to only one piece of dynamic text. If you have multiple dynamic text values in one layer, then only one value needs to exist for the dynamic text to display.

    3. Add fallback text for the dynamic text layer. Start at step 8 of Adding Dynamic Text in Add Dynamic Text to Creatives.

      As long as each dynamic text layer has at least one matching value for every location, then fallback text is not necessary. Fallback text doesn't have any negative effects, so including it is a good practice.

      Animated demonstration of a user clicking outside of a text layer that contains location-based dynamic text values to create the layer's fallback text layer

  11. Add the dynamic click zone for a URL that corresponds to your retail location that is closest to the customer.
    1. Click Add Layer and then select Click zone.

      Callout of the Add Layer selector and the Click zone option in Content Builder

    2. Click DYNAMIC in the Link properties, and then select an option from Dynamic link to determine if the click zone's link comes from the URL1 field or the URL2 field of the account's locations list.

      Animated demonstration of a user clicking the DYNAMIC button in the Link properties of a click zone layer and then selecting 'URL1 of user's closest location' from the 'Dynamic link' selector

    3. Complete the remaining fields in the Link section:
      • Fallback URL: The URL used if the customer's closest location doesn't have a URL in the locations list
      • Alt text: The text displayed on mouse hover over the image or in lieu of the image if the customer has disabled image display in their browser
      • CSS class: Defines the CSS class for the link
      • Relationship: Defines the relationship between the current image and the linked image

      Callout of the Fallback URL field, the 'Alt text' field, the 'CSS class' field, and the 'Relationship (rel)' field in the properties panel for a click zone layer

    4. Select an option to define how the click zone's link launches:
      • In the same browser window in which the customer is viewing the Web experience or email
      • In a new browser window or tab, depending on the customer's browser settings
      • In a pop-up window, the dimensions and appearance of which you must also configure

      Callout of the Open options, with the configuration settings for the pop-up window option shown

    5. Click SAVE.
    6. Following the steps in Previewing a Creative with Dynamic Text in Add Dynamic Text to Creatives to ensure that you configured all the layers appropriately for all customers who qualify for the experience.
    7. If necessary, click SAVE if you made any changes after previewing the image, and then click CLOSE AND RETURN.

      Callout of the SAVE button and of the CLOSE AND RETURN button

  12. Configure the action template's other required inputs as necessary.
  13. Configure the action template's optional inputs. See Creating a Responsive Click Zone for CSS you may need to include in the action.
  14. Click CREATE.
  15. If necessary, configure the WHEN settings for the experience.

Creating a Responsive Click Zone

To create a responsive click zone for an image, you must include a few CSS styles when configuring the WHAT action template for the experience.

Image Container Styles

Set the max-width value to the width of the included content creative in pixels.

max-width: ###px;

Image Styles

Set the max-width value to 100% to allow an image's click zones to scale with the image.

max-width: 100%;

Related Articles