Use Location-Based Dynamic Text and Click Zones

Content Builder lets you create location-based dynamic text and click zones for both Web and Open-Time Email experiences. For email experiences, you can also build maps.

Example of content with location-based dynamic text and a map

The location-based dynamic text tokens use information from the location list that you uploaded in Content Manager.

The image created in the process below is just one example of what you can create in Content Builder. You can choose to include or exclude any of the options demonstrated here.

Prerequisites

Before you can use maps and location-based dynamic text, you must upload a locations list to Monetate.

The Locations tab in Content Manager

See Upload a Locations List for instructions.

Creating an Experience

Create a new email or Web experience or open a draft of the experience type you want to use. Next, decide who you want to see the content with the location-based dynamic text, and then select accordingly a target value or WHO target.

Add an image if you're using an email experience, or navigate to the WHAT settings of the Web experience to choose an action for displaying the image. Once you select or upload the image to the Personalization platform, launch Content Builder to add the location-based dynamic content.

Adding Location-Based Dynamic Text

Follow these steps to add location-based dynamic text to an image using Content Builder.

  1. Click Add Layer and select Text.

    callout of the Add Layer selector and the Text option

  2. Double-click the text box on the canvas to display the text toolbar, and then click Add dynamic content.

    Callout of the 'Add dynamic content' button on the text toolbar

  3. Select from Property each dynamic text option that you want to add to the image. Click OK.

    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.

    Callout of the Property selector and the OK button on the 'Add dynamic content' modal

Include pre-text or framing text in its own layer before or after any of the dynamic text values you add. Doing so allows the fallback text to replace a dynamic text value that comes back empty.

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.

To add fallback text, start at step 7 of Adding Dynamic Text in Add Dynamic Text to Creatives.

Adding a Dynamic Click Zone

You can add a dynamic click zone to either an email or Web experience. When the site visitor or email recipient clicks this zone, they're directed to a URL that corresponds to your retail location that is closest to them. The link populates from either the URL1 or URL2 field of your locations list.

The URL1 and URL2 fields are optional for a locations list. See Upload a Locations List for the steps to update location information, if necessary.

Follow these steps to add a dynamic click zone to an image using Content Builder.

  1. Click Add Layer and select Clickzone.

    Callout of the Add Layer selector and the Clickzone option

  2. Click DYNAMIC in the Link section of the properties panel.

    Callout of the DYNAMIC button in the Link section of the properties panel

  3. Select an option from Dynamic link to determine if the click zone's link comes from the URL1 field or the URL2field of the account's locations list.

    Callout of the Dynamic link selector

  4. Complete the remaining fields in the Link section:
    • Fallback URL: The URL used if the visitor's or recipient's closest location doesn't have a URL in the locations list
    • Alt text: The text displayed on mouse hover over the image or appears in lieu of the image if the viewer 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 field

  5. 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

  6. Click SAVE.

    Callout of the SAVE button

Creating Responsive Click Zones

To create a responsive click zone for an image, you must include a few CSS styles that you need to include when configuring the action in 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%;

Adding a Map

Follow these steps to create a dynamic image that is able to show each email recipient the closest location to them.

The maps feature is only available for email experiences.

  1. Open in Content Builder the image to which you want to add the map.
  2. Click Add Layer and then select Map.

    Callout of the Map option in the Add Layer selector

  3. As necessary, adjust the options available in the Map Properties modal.
    • Pin color: Determines the color of your location's pin on the map
    • Pin size: Determines the size of the pin in relation to the map
    • Map type: Determines the type of map shown to the recipients: roadways, satellite, terrain, or hybrid
    • Zoom level: Determines the map's zoom level
    • Saturation: Determines the color saturation of the map
      • Negative saturation levels approach black and white.
      • Positive saturation levels approach vibrant colors.
    • Custom Pin: Allows you to upload a custom pin to mark a location
      • Images must be in the PNG, JPEG, or GIF format.
      • The maximum image size is 64x64 pixels.

    Callout of the configuration settings on the Map Properties modal

  4. Click SAVE.

    Callout of the SAVE button on the Map Properties modal

After the Map Properties modal closes, you see a placeholder for the map on the image you opened in Content Builder.

Example of a map placeholder on an image open in Content Builder

You can adjust the placeholder, if necessary, by clicking and dragging it on the canvas.

After you add a map and location-based dynamic text, you can add any other layers to the dynamic content as needed. For example, you can add a rectangle layer with a click zone to act as a button that, upon clicking it, takes the recipient to the locations page of your site.

Example of an image with location-based dynamic content, a location-based dynamic map, and a 'Click here for more locations' button

Previewing Dynamic Content

After you save all the additions and changes you've made in Content Builder, ensure that you configured all the layers appropriately for all recipients or site visitors by following the steps in Previewing a Creative with Dynamic Text in Add Dynamic Text to Creatives.