Using the Behavioral Targeting module, you can automatically include or exclude items for certain viewers from a SharePoint list that appears anywhere on your website. In the following example, we will assume that you have a "News Items" list on your sit, and you want to display posts based on the location of some of your visitors. You will need to be able to manually edit your SharePoint site in order to complete these instructions.

1: Create a New "Target Market" Column

In your SharePoint site editor, add a new column adjacent to your News Items that identifies the relevant market. Here, we called the column "Target Market" with a value of the target country name.

News Item

Target Market

First news item title

Australia

Second news item title

Germany

Third news item title

All

 

2: Display the List on Your Site

You can either use the built-in list view SharePoint web part or create your own list. In either case, it is important to include the newly created "Target Market" column. It can be hidden from view as long as it is included in the source HTML, because the behavioral targeting code runs on the client side using JavaScript.

 

 

Note: We recommend assigning a unique class name, as you will need to access the target market value in every row. For example, if the target market cell has the class "targetmarket" you can access all relevant cells using jQuery: $(".targetmarket").


3: Create Your Target Segments

Create a segment for each target market. In this example, we created a segment for Australian visitors:

 

4: Create a JavaScript Element

Create your new personalized content within the behavioral targeting module and choose the webpage that the news web part will appear on. Then click the "Create a new UI Element" link:

 

Once the page is open, click the link that reads "Create JavaScript Element" in the upper left corner:

 

Now you may set a name for that element, we recommend using a descriptive name to more easily remember what the script is for.

Next, define the element's Default Behavior. The Default Behavior will be executed for users who are not part of target markets that you have defined for this web part. For example, if we create a segment for Australian visitors and a segment for German visitors, then visitors from all other locations will experience the default behavior.

Enter the name of the JavaScript code you would like to execute and enable the "I want to change the default content of this element" check box as shown here:

 

The Default Behavior in our example is to show only items that are marked as "All" in the target market column.

Now that a web part, ideally with a unique class name has been created, you can find other ways to select the target market cells (using cells orders or tag names). Assuming you've assigned a specific class to the target market cell (class="targetmarket"). The following code block will hide all rows and display only the ones with the value "All" in them. Make sure to save your changes.

$(function() {   

  // hide all rows

  $(".targetmarket").parent().hide();

  $(".targetmarket").each(function() {

    // for each row, check if the value equals to "all". if it does, show it.

    if ($(this).text().toLowerCase() == "all") $(this).parent().show();

  });

});

5: Create Personalized Content for Each Target Segment

After clicking the save button, you will be returned to the personalized content screen. Choose the segment you want to use (eg., "Visitors from Australia") and edit the JavaScript code to show items that have the value "All" or "Australia" in the target market cell accordingly:

$(function() {   

  // hide all rows

  $(".targetmarket").parent().hide();

  $(".targetmarket").each(function() {

    // for each row, check if the value equals to "all". if it does, show it.

    if ($(this).text().toLowerCase() == "all" || $(this).text().toLowerCase() == "Australia") $(this).parent().show();

  });

});

 

 

 

Edit the JavaScript code for all further target segments as before and you should then have a list similar to the one below. For each target segment, "listwebpartpage.aspx" is the page that the web part is on, and "Filter List JS" is the name of the JavaScript Element that was edited for each individual segment.

 

 

  • No labels