How to use Croct for personalization based on location

Croct is the easiest way to collect, manage, and consume real-time data to fuel personalized experiences. A single line of code gives you a fully-featured devkit for building natively personalized applications.

This example shows you how to use our Personalization Management System (PMS) to provide different content based on the user's location. The banner below has two available contents: one for users with a known city and one for users with an unknown city. You should see the one that fits your context.

This is an example title

Here you should have a subtitle.


The following steps guide you on installing the library and integrating it into your application.

Installation

Currently, we provide two SDKs: one for Javascript implementations and another for React applications. This example shows how to work with Croct using our Plug JS, which can be installed via NPM or as a script tag.

If you wish to test this in a local environment, you can do so by using our sandbox app ID, which is 00000000-0000-0000-0000-000000000000.

Slot

A slot represents a personalizable element of the interface.

For components whose content changes too often, using slots gives your team the flexibility to change the content or personalization rules whenever needed without touching or deploying the code.

Each slot has a predefined structure whose content may vary according to a personalization strategy. The return is a Promise that resolves to the slot content in the format as follows:

Given that the banner's HTML code is as shown below, this example assumes that a slot with ID location-banner and the following schema exists in Croct's account.

HTML code:

Slot schema:

Content Fetch

When using a slot, all the marketing team needs to do is configure the personalization rules and content in Croct's platform. Based on the slot's configuration and the user's context, the PMS will decide which content to show to that user.

For your context, this is the payload for this slot:

And here's an example showing how to fetch the content for this slot:

Notice that there's no logic on the client-side. It means that your team can freely change the slot content as needed without requiring you to update the source code.

One of our most outstanding advantages is the time it takes for the entire team to benefit from our tools. We work hard to improve our product every day to make it as easy as possible.

Our code and documentation are open. You can read more about our plug's features and APIs here, and even contribute if you like :)