Dynamic Web Content

Dynamic web content is one of several methods Mautic uses to personalize the web experience for their contacts. Marketers can display different content to different people in specific areas of a webpage. Mautic users may want to personalize this content based on data you’ve collected about the website visitor. Even anonymous contacts may see dynamic content, if you’ve collected any information about them (such as location data).

Preparing for Personalization
Creating Content


Implementing Dynamic Web Content

Preparing for Personalization

Planning

Before you can create personalized content, you’ll need to think about a few things:

  • Where on your website or webpage would you like to include personalized content?
  • What audience(s) would you like to personalize content for?
  • Do you have the necessary information in your database, enabling Mautic to identify who should see your personalized content?

Mautic Configuration

In order for Mautic to pass information back and forth with your website, you must configure your CORS settings. Go to Settings –> Configuration –> System Settings and scroll down to the CORS Settings section. Make sure Restrict Domains is still set to yes (this is the default setting) so the whole internet can’t try to interact with your Mautic instance. Then, add the domains you’re using with your Mautic instance – particularly any domains where you’d like to use dynamic content.

System Settings - CORS Settings

Website Preparation

Of course, once you’ve determined where on your site you’d like to display personalized content, you’ll need to create an area to add that content. Mautic is CMS-agnostic, so you can add a dynamic web content slot to any website you’ve created. All you need to do here is create an HTML slot where the dynamic content will live.

Creating Content

Default Content

Default content is the content a regular visitor should see when they visit your site. In case a visitor doesn’t meet any of the criteria you’ve set for dynamic web content, or in case a visitor isn’t tracked as a known contact, you’ll still want to have content in the section of the page that you’ve set aside for personalization rather than a blank area. Build that content directly on your site.

Note: If you’re using focus items as your dynamic content and only showing specific focus items to specific audiences, you do not need default content. Focus items are pop-ups that don’t take up an area on your page.

Dynamic Content

Mautic has both campaign-based and non-campaign-based dynamic web content. To create either, go to the Components section of Mautic and select Dynamic Web Content. Then, click +New to create a new slot.

New DWC Slot

Internal Name: This is how the slot will appear in your list of dynamic web content slots. We recommend including information on the data point(s) you’re personalizing for (e.g. country) as well as the content within the slot (e.g. United States). For example, if you were creating a personalized slot for people in the United States, you might name the slot Country – United States. If you plan to have multiple personalized content slots for the same audience across your site, include the page title or other identifying information for this particular slot.

Content: Use the WYSIWYG builder to create the dynamic content slot. You may include images and/or videos. If you prefer HTML, you can also go into code view by clicking the </> icon in the toolbar. Mautic’s dynamic web content supports tokens like in landing pages or emails. To add a token, click the tag icon in the WYSIWYG toolbar. Supported tokens include:

Contact field: {contactfield=fieldalias}

Landing page link: {pagelink=ID#}

Asset link: {assetlink=ID#}

Form: {form=ID#}

Focus item: {focus=ID#}

Category: You can organize your dynamic content slots based on their goals, campaigns, etc. Learn more about categories in our Global Categories help center topic.

Language: Mautic enables marketers to present content in multiple languages. You may use the same slot, but have the content appear in various languages depending on the country where a contact is accessing the content from. If you’d like to create content in a second (or third, fourth, etc.) language, select the language you’re creating a variant in.

Is a translation of: This goes together with the Language option. If you’re creating a slot in a second language translation, select the original slot that you’re translating. That way, the same slot will appear based on either a campaign or filters you’ve set, but the content will be translated if a content is viewing the page where the slot is in a country where a different language is used.

Published: A dynamic content slot will only appear on your website if it’s published. If it’s unpublished, visitors will see the default content you’ve created on your site.

Is campaign based?: If you set this to Yes, you’ll only be able to push a dynamic content slot to a contact based on them viewing a specific page within a campaign. If you set it to No, you’ll be able to select filters for visitors to meet specific criteria to see the content.

Requested slot name: Only for non-campaign-based dynamic content, this is the name you’ll use in the code you’ll add to your site. Or, the name you use to add a dynamic web content slot to a Mautic landing page. It’s possible to have multiple slots for the same data point, so this is often somewhat generic (e.g. country). We recommend referencing the slot name in the item name as well.

Google Analytics UTM tags: To track your leads that convert from dynamic web content slots, you may use UTM tags to indicate that lead source in Google Analytics or Mautic reports. See our document on UTM Tags for more information.

Campaign-Based Dynamic Content

Decision – Request Dynamic Content

Request Dynamic Content

To use campaign-based dynamic content, you’ll need to use a Campaign Decision for “Request dynamic content”. That will check to see if a campaign member visits a page where a dynamic content slot is. Visitors don’t need to do anything specific to “request” the dynamic content. All it takes is visiting a page where you’ve added a dynamic web content slot.

The name is the name for the campaign event. You may want start it with something like “Req-DWC:” so that when you’re looking at campaign reports, you can clearly see the event type, and include the slot name you’re checking for. That way, you’ll be able to easily see how many contacts got to the campaign event where you’re checking if they “request” that slot or not. For example, Req-DWC: Country-Header.

The requested slot name is what slot Mautic will look for on the page. If it’s on a 3rd-party page, it’ll be in the code you use to add the dynamic content slot to your page. If it’s on a Mautic landing page, you’ll define the slot name on the landing page.

The default content is what you’ll show to people who don’t meet the condition(s) you set at the next stage of the campaign – and possibly what they’ll see first, before Mautic is able to push the dynamic content.

Condition – Filter

Campaign Condition - Contact Field Value

To determine which dynamic content slot you want to push, you’ll need to have some sort of filter within the campaign. This happens with campaign conditions. You may use any condition type to see if a contact meets whatever criteria is relevant to the dynamic content slot.

Action – Push Dynamic Content

Campaign Action - Push Dynamic Content

This action type only appears as an option later in a campaign than a Requests dynamic content decision event.

If a contact meets the condition you’ve set up, you’ll push the personalized content for that criteria. Using this campaign action, you’re selecting which slot from your Dynamic Web Content slot list you’re going to push. To make finding the right slots easier, you’ll only see the slots you’ve set as campaign-based in the selection list. If you haven’t yet created an appropriate slot, you can click +New Dynamic Content to pop out a new window and create a new slot.

Best practice is to start the name of the event with DWC: and include the name of the slot you’re pushing. For example, DWC: Country-Header-US.

You may set up multiple conditions following the decision, with a different DWC slot on the yes path for each one.

If the contact does not meet (any of) the conditions you’ve set up, they’ll see the default content that you selected in the decision. That’s true even if you don’t have anything on the No path for the condition.

Here’s what a sample campaign sequence would look like:

Campaign - Dynamic Content Sequence

Non-Campaign-Based Dynamic Content

Filter-based DWC

This is the recommended way to use dynamic web content.

Filter-based dynamic web content is often easier to set up. All you need to do is go to the Filters tab and set up the criteria that contacts must meet to see the DWC slot. Then, anytime a contact visits a page you’ve added the slot to and meets those filters, Mautic will show the personalized slot.

Implementing Dynamic Web Content

Users may add dynamic web content either to a Mautic landing page, or to an external website.

Mautic Landing Pages

In the Mautic landing page editor, drag in a Dynamic Content slot. Within the slot editor, build your default content. In this case, we’ll stick with the example of countries. If a visitor’s country is unknown, they’ll see a map of the world.

Landing Page Dynamic Web Content

In campaign-based dynamic content, anytime a visitor hits any page with the requested slot name you set up in the campaign decision they could potentially see dynamic content. If you’d like the page you’re creating to be included as a potential page for the visitor to see personalized content, use a campaign-based DWC slot name as your Requested Slot Name here.

In filter-based dynamic content, the slot name should just be the data point you’re filtering for. On a landing page, use that slot name and depending which filters the visitor meets, Mautic will show the appropriate DWC item (slot) you’ve created with that slot name.

External Sites

When building your page, you’ll need to create the area to personalize. In that area, add this HTML tag:

<div data-slot=”dwc” data-param-slot-name=”slotname“>
<h1>Default content</h1>
</div>

Be sure to replace “slotname” with the slot name you create in the campaign or on the non-campaign-based DWC slot. Also, add your own default content between the <div> tags so that if a contact is not known or doesn’t meet the criteria you’ve set up, they’ll still see something.

To make it even easier, the plugins for Joomla! and WordPress use shortcodes to enter dynamic web content.

Joomla!:  {mautic type=”content” slot=”slotname“}Insert default content{/mautic}

WordPress: Note: Replace the parentheses with square brackets. (mautic type=”content” slot=”slotname“)Insert default content(/mautic)