How to display different content to different visitors

It’s seen as good practice that your landing pages match the style of the advert that led users to them. In some cases this may require you to create completely different landing pages for each ad, but in some cases it may be possible to use one page with different ads.

You can make this work by showing different content depending on the ad clicked and Uncle Chuckles has a free plugin to make this easy to do.

If you’ve not already downloaded a copy of Uncle Chuckles Targeted Content plugin, you can get your free copy here. I’ve also got an article to walk you through how to install a downloaded plugin.

The UC Targeted Content block

The Targeted Content block is a simple wrapper that you can add other blocks to.

In the front end, the Targeted Content block has no styling. In the editor though, it has a mixed gray chevron background to make it more obvious.

The block’s Alignment control defaults to None. You’ll want to leave this as is if you’re wrapping an image or a series of paragraph blocks.

However, changing this may be useful if you want to wrap another container block, such as a Cover or Columns block, that has had its own alignment set to Full or Wide Width.

URL query parameters

The secret to making the Targeted Content block display for the right visitors is URL query parameters. Query parameters are the part of a URL that appear after a question mark (?). A query parameter must contain a key and usually will also have a value, with both separated by and equals sign (=).

For example:

https://unclechuckles.com/landing-page?social-network=facebook
https://unclechuckles.com/landing-page?social-network=instagram

In the first example above, the query parameter key is social-network and the value is facebook. The second example also has the social-network key, but the value is instagram.

The key and value can be any string of text, but you should avoid using spaces or punctuation, other than hyphens (-) and underscores (_).

If a URL requires more than one query parameter, they should be separated with an ampersand (&).

https://unclechuckles.com/landing-page?utm_campaign=launch&social-network=facebook

The example above shows two query parameters separated with an ampersand.

Now you understand how query parameters work, you can create different URLS for different ads or websites that link to the same page. You can then display different content based on the query parameters that are present or absent.

Display rules

The Display Rules panel controls which Targeted Content blocks will be displayed on the front end. If left to the default settings, the block will not appear.

When the Show if toggle is left turned off, you can make a block visible if specific query parameters are not present in the URL. You can enter multiple query parameter keys, separated with a space, and the block will only display if none of these parameter keys are in the URL.

When the Show if toggle switch is on, you can enter the query parameter key that must be present in the URL to display the block. Again you can enter multiple keys separated with a space. In that case, if any of the keys are present, the block will display.

You can also be more specific and enter a query parameter key and the value that it must match. If the key is in the URL, the block will only display if the value matches that entered.

For example, if facebook is entered as the Query parameter value, the block will display if the following URL is used.

https://unclechuckles.com/landing-page?social-network=facebook

The block won’t display if the following URL is used.

https://unclechuckles.com/landing-page?social-network=instagram

Using this approach, you could add three blocks to a page, with one displaying content only if the URL doesn’t include the social-network parameter, and the other two only displaying if the social-network parameter is equal to facebook or instagram.

Substituting text

One last feature available to you is the ability to add query parameters that can personalize the text displayed.

The Targeted Content block allows you to place up to three placeholders in any text. These placeholders will then be replaced by the value of corresponding query parameters or specified default values.

The three placeholders you can use are [[ECHO_1]], [[ECHO_2]] and [[ECHO_3]].

These will be replaced by the values of the query parameters e1, e2 and e3 respectively.

As an example, assume a Targeted Content block contained the following text:

Hello [[ECHO_1]]

If a URL similar to this was used, “yoursite.com?e1=Uncle Chuckles”, the text displayed would be:

Hello Uncle Chuckles

You can also add a default value to replace each placeholder in the event that the respective query parameter is not present in the URL. You can leave the default blank to remove the placeholder without adding replacement text.

Note that if the parameter is present, but empty, the placeholder will be removed and no replacement text will be added, even if a default value has been set.