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.

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

Prerequisites

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

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.

   

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

   

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.

   

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.

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.

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

1. Click Add Layer and select Clickzone.

   

2. Click DYNAMIC 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.

   

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

   

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

   

6. Click SAVE.

   

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.

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

   

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.

   

4. Click SAVE.

   

After the Map Properties modal closes, you see a placeholder for the map on the image you opened 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.

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.