Customize user experience with tags and attributes

Learn how to use tags in claimr campaign settings and widget attributes to dynamically show or hide Quests and Groups, creating personalized experiences for different user segments.

Introduction

In claimr, Tags are labels you assign to content elements like Quests or Groups within your campaign settings. When combined with specific data- attributes in your widget integration script, these tags allow you to dynamically control what content is shown or hidden for individual users or user segments. This powerful feature enables you to tailor the campaign experience, making it more relevant and effective for different audiences.

Benefits of using tags for customization

• Showing specific Quests or Groups only to certain users.

• Hiding content based on user characteristics (e.g., location, past behavior).

• Creating personalized user journeys within the same campaign.

How tag-based customization works

The system relies on a two-part setup: tagging your content in the claimr admin panel and then passing user-specific tags via the widget script.

1. Tagging content in claimr: First, you assign one or more tags to specific Quests or Groups in their respective settings within the claimr admin panel. For instructions on adding tags, see the Tags setting section in Quest settings or Group settings articles).

2. Passing tags via widget attributes: Next, for each user session, you include specific data- attributes in your widget integration script that tell claimr which tags are active for that user. These are data-show-tags and data-hide-tags.

3. Display logic: The claimr widget then uses this information to decide what to show or hide:

   • If a user is passed a tag via data-show-tags, any entity (currently Quests and Groups) with a matching tag will be displayed to them, even if it might otherwise be hidden by default or other rules.

   • If a user is passed a tag via data-hide-tags, any entity (Quests and Groups) with a matching tag will be hidden from them.

   Example scenario: An X-related group of quests is tagged x_users in the admin panel and is hidden by default. For users who have connected their X account, you pass data-show-tags="x_users" in the script. This group will then appear for those users.

Configuration in claimr admin panel

1. Tagging quests and groups:

   • Navigate to the settings page of the Quest or Group you want to tag.

   • Locate the Tags input field.

   • Enter your desired tag(s), separating multiple tags with a comma. Example:beta_feature, new_user_flow, region_EU.

   • Save the Quest or Group settings.

2. Defining default visibility:

   • The "default visibility" of a Quest or Group is generally determined by whether it's set to "Hidden" in its own settings or by other campaign-level rules.

   • The data-show-tags attribute is used to override a hidden state for users with matching tags.

   • The data-hide-tags attribute is used to override a visible state for users with matching tags.

   There isn't a separate "default visibility for tags" setting per se; tags are used to modify the existing visibility based on the user's context provided by the script attributes.

Script іntegration сonfiguration

As detailed in our Widget attributes article, there are 2 key attributes for tag-based customization:

1. data-hide-tags

• Description: Pass a comma-separated list of tags. Any Quest or Group in your campaign that has one or more of these tags assigned to it will be hidden from the user for this session.

• Format: Comma-separated string of tags.

• Example:

  <script
    id="claimr-script"
    data-organization="YOUR_ORG_ID"
    data-campaign="YOUR_CAMPAIGN_ID"
    data-container="YOUR_CONTAINER_ID"
    data-hide-tags="advanced_feature,geo_restricted_content"
    src="https://widgets.claimr.io/claimr.min.js">
  </script>

2. data-show-tags

• Description: Pass a comma-separated list of tags. Any Quest or Group that has one or more of these tags assigned to it will be shown to the user, even if it might be hidden by default or due to other rules.

• Format: Comma-separated string of tags.

• Example:

  <script
    id="claimr-script"
    data-organization="YOUR_ORG_ID"
    data-campaign="YOUR_CAMPAIGN_ID"
    data-container="YOUR_CONTAINER_ID"
    data-show-tags="beta_testers_group,early_access_quest"
    src="https://widgets.claimr.io/claimr.min.js">
  </script>

You can use both data-hide-tags and data-show-tags simultaneously if needed, but ensure your logic is clear to avoid conflicting rules.

Practical use cases

• Geo-targeting content:

  • Tag content with region-specific tags (e.g., europe_only, usa_promo).

  • In your website/app logic, detect the user's region and pass the appropriate tag via data-show-tags (e.g., data-show-tags="europe_only") or hide content for other regions using data-hide-tags.

• A/B Testing different content blocks:

  • Create two versions of a Quest Group (e.g., Group A tagged test_version_A, Group B tagged test_version_B).

  • Serve the widget script with data-show-tags="test_version_A" to 50% of users and data-show-tags="test_version_B" to the other 50% to test different content flows.

• Hiding features unavailable to certain users:

  • If a feature (e.g., "staking_quest") is only available to users who meet certain criteria (e.g., KYC verified), tag that quest staking_enabled.

  • Only pass data-show-tags="staking_enabled" for users who have met those criteria.

By strategically combining tags assigned in the claimr admin panel with the data-show-tags and data-hide-tags attributes in your widget script, you can create highly dynamic and personalized campaign experiences for your users.