< Return to Feed
Michael DeRosa - 04.24.2018

Redirecting Users Based on ZIP Code in Crownpeak

Recently a client asked to have users redirected from a web page to some other page depending on their ZIP Code.

One way to do this is through a client-side script; you could make an API call to some service (such as http://ip-api.com) to determine the client’s location, then match the location to a pre-defined list and redirect to the page mapped for the location. A downside of this approach is that any time you want to change the location-redirect mappings you need to get a developer to update the script before re-deploying it to the site.

With Crownpeak, this location-redirect mapping can become "content" in the CMS so that a content author—not a developer—can update the mappings as needed. Here’s how.

Create a WCO Snippet

First, create a Web Content Optimizer (WCO) snippet. This is a Crownpeak feature which is ultimately just a javascript tag on your page. We can "attach" certain behavior to this tag via the CMS. In the example below, we’re using Crownpeak’s Volte CMS tool.

In this case, we want to perform a redirect. We'll redirect the user to the "/default" page if no matching location is found. Example of coding for a Web Content Optimizer snippet.

Creating a Targeting Group and Variant

Now, create a "Targeting Group" for this snippet. We want to target users with a certain ZIP Code in Atlanta.
Example of a Targeting Group for a snippet.

Now, add a "Targeting Variant" for this group since we want users in this group to redirect to a unique page.

If a user falls in this “Atlanta” group, redirect to the "/atlanta" page.
Example of a Targeting Variant.

Set the Redirect

Now we just need to wire up the WCO snippet to the page we want to redirect from. We'll do this through a WCO-enabled WYSIWYG.

Add this code on the input template of the page to create a WCO-enabled WYSIWYG.

On the output template of the page, just output the contents of the WYSIWYG.

Attach Redirect Sample Snippet

Now, attach the “Redirect Sample” snippet to the WYSIWYG in the page instance that we want to redirect from.
Example of a redirect sample snippet attached to a WYSIWYG.

With everything now wired up, if you want to add a new redirect for a new set of ZIP Codes going forward, it’s just a matter of adding a new “Targeting Group” and new “Targeting Variant” in the CMS.