Skip to main content
Widget Targeting

Load a specific widget based on user criteria or purchase behavior

Samantha avatar
Written by Samantha
Updated over a week ago

Widget Targeting

Feature Summary

Widget targeting allows you to define user-centric logic, based on customer profile or purchase attributes, to conditionally trigger a specific widget, usually from a mutually exclusive group of widgets. Widget targeting is an advanced-use feature for which we recommend additional quality assurance checks, and Customer Success support.

This advanced feature is available upon request via your Customer Success Manager or support@friendbuy.com, for an additional cost.

Prerequisites

To set up targeting criteria based on customer attributes saved in your profile database,  such as 'VIP', 'Plan Type', 'Region', 'Gender', 'Rewards Earned', etc., you would adjust your track customer JavaScript tag to include new properties, as key-value pairs. Note, these properties passed in Javascript are used at the browser-level only, and will not be stored by Friendbuy.

To pass key value pairs to Friendbuy, update your existing track customer Javascript tag to include your own properties, for example:

<script>
          window['friendbuy'].push(['track', 'customer',
              {
                  id: '{{ customer.id }}',
                  email: '{{ customer.email }}',
                  first_name: '{{ customer.first_name }}',
                  last_name: '{{ customer.last_name }}'
                  VIP: insert variable
                  plan_type: insert variable
              }
          ]);
 </script>

In addition to targeting based on customer attributes via the track customer JavaScript command, Friendbuy's track order and track products commands can also be used. Use cases included showing different widgets based on the amount or skus included in an order.

Furthermore, you have the option to use the standard Friendbuy properties or your own custom properties. Similar to the example track customer modification above, to use custom properties for widget targeting with the track order and track products commands, you would simply include the additional properties in the JavaScript snippets on your site and populate those values when the command is executed.

Configuration Components (as seen on setup)
To enable Targeting: Click 'Enable' from the Referral Widgets overview page, or expand the Settings tab from the widget overview and select Widget Targeting.

Targeting Criteria: Set condition for widget to load

Targeting criteria should be entered as a single JSON object. The properties of the object represent keys whose values will be checked by Friendbuy when the integration JavaScript tag(s) runs. When the keys and values in the criteria match the tracked purchase or customer that you send to Friendbuy for a logged in customer, then this widget will appear. 

Check out the examples link available from the configuration setup.

URL Targeting: Set on which page(s) the widget will show

Define specific pages of your website to trigger widget. This applies to both overlay and embedded widgets. but should be set for embedded widgets, Ribbon, and Autopop. *// is default, and denotes ALL pages. 

IMPORTANT: If you are enabling targeting on an existing widget, you should make the transition to use URL targeting feature if not already set, and apply same across any other widgets in 'group'.

Targeting Selector: Define widget location and group widgets

Input the CSS selector for the element on your page that will contain the widget. For a group of mutually exclusive widgets, use a single, shared targeting selector, and be sure assign a Fallback widget.  

  • Examples: #your-id-selector or .your-class-selector

Note: If using a Friendbuy-powered Ribbon or the Autopop setting for overlay widget, adding this selector to a page is not required ---but defining the selector is necessary for proper widget grouping and helpful for ongoing management.

Important Note

Widgets that share the same selector (Targeting Selector), and are placed on the same page within your site (URL Targeting) should be treated as mutually exclusive events and the criteria defined should reflect as such. Specifically, if criteria set in 2 different widgets with same selector could both potential be TRUE for a customer, there is a risk that 2 widgets will appear.

If you have questions or concerns about your implementation, please consult your Customer Success Manager, or shoot us a Help Chat.

Example Use Case

You would like to offer a higher reward amount to your VIP customers. You would create a specific widget for VIP customers (e.g. 'Big Bucks for VIP'), and another for non-VIP ( e.g. 'All non-VIP')
First, customize each widget creative, copy and reward amount respectively.
Next, make sure you are passing this new property and value in track customer.
For example:

          window['friendbuy'].push(['track', 'customer',
              {
                  id: '{{ customer.id }}',
                  email: '{{ customer.email }}',
                  first_name: '{{ customer.first_name }}',
                  last_name: '{{ customer.last_name }}',
                  VIP: insert variable,
                  plan_type: insert variable
              }
          ]);

Assuming you will be using Widget A, named 'Big Bucks for VIP', in the Widget Targeting configuration 'Targeting Criteria', you would add something like this JSON: 

        {
           "customer": {
           "VIP": true
          }
         }       

On the configuration, you will also be prompted to define URL targeting (which pages to show on your site), and the Targeting Selector (where on those pages the widget should load, by element.)
Then, to show Widget B and reward, named  'All Non-VIP', to all other customers/site visitors, you would enable Widget Targeting, and select 'Set as Fallback' option, rather than inserting criteria.
Set the same URL Targeting pages and same Targeting Selector element for both widgets.
Finally, be sure to publish both widgets, and test!

For additional use cases and examples, click 'See Examples' on Widget Targeting configuration page, once the feature is enabled for your account.

Did this answer your question?