Gamification templates

Overview

In today's digital world, gamification has become an increasingly popular strategy for engaging website visitors and enhancing user experiences. One effective way to incorporate gamification into your app is through the use of gamification pop-ups. In this article, we will explore why you should use gamification pop-ups and how to configure them.

Why use gamification pop-ups?

Gamification pop-ups can provide a number of benefits for your app, including:

      1. Increased engagement: Gamification pop-ups can make your app more engaging by providing visitors with a fun and interactive experience. This can encourage visitors to spend more time on your website, explore more pages, and ultimately increase their chances of converting.

      2. Enhanced user experience: Gamification pop-ups can enhance the user experience by providing visitors with a unique and memorable experience that sets your app apart from competitors.

      3. Improved lead generation: Gamification pop-ups can be used to incentivize visitors to provide their contact information, which can then be used for lead generation purposes.

Gamification pop-ups in MoEngage

There are two in-app gamification pop-ups available by default in MoEngage:

Spin the wheel 

A spin-the-wheel popup is a type of interactive pop-up that can be configured on a screen in the app when a user visits or takes a specific action. The popup displays a virtual wheel that the user can "spin" by clicking a button. The wheel then spins and stops on a randomly generated prize or offer, which the user can claim by following the instructions given in the popup.

spin_the_wheel.gif

Scratch card

The scratch card popup displays a virtual scratch card that the user can "scratch" by clicking or swiping on the card with their mouse or finger. The card then reveals a randomly generated prize or offer, which the user can claim by following the instructions given in the popup.

Scratch_card.gif

Using gamification pop-ups campaigns

Now that you understand the benefits of gamification pop-ups let's explore how to create a gamification campaign in your app.

      1. Start a new in-app campaign.
      2. Complete Step 1 of the campaign creation.
      3. Click next.
      4. Scroll down to HTML templates.
      5. Select the 'Spin the Wheel' or 'Scratch card' template.
      6. The template would open up in the code view.
      7. Configure the code according to your use case, as shown below.
      8. Schedule the campaign, set the delivery controls, and publish the campaign.

 

ezgif.com-video-to-gif.gif

Configuring gamification pop-ups

Spin the wheel template

      1. Change background image 
        To change the background image of the template, uncomment the style tag from lines 12 to 14 in the code and add the path of your image. 

        background_change_code.png

      2. Change other images in the template, like the win icon or lose icon
        The code has been commented in such a way that you would be able to find what to change where. To change images in the template, search for the <img> tag and replace the existing source with the source of your image.

      3. Add or remove sectors in the wheel
        The sectors of the wheel are created using the "DATA" variable in the code. You can add or remove sectors according to your use case. Make sure to have unique ids for all your sectors.

        Screenshot_2023-04-14_at_6.37.31_PM.png


      4. Modify sectors
        You can modify each of the sectors by changing the value for each of the keys.
        Key Description
        id It is a unique number.
        weightage

        More the weightage, the more probable it is for the user to receive that sector on spinning the wheel. 

        Note:
        Weightage does not specify that a sector will be allotted only for a certain number of times for the users during the campaign duration.

        For example, you set weightages as - 
        Sector 1 - 50
        Sector 2 - 30
        Sector 3 - 15
        Sector 4 - 5

         In this case, weightage does not mean that sector 4 will be allotted to only 5 users for the entire campaign duration. It means that for the user this pop-up is visible, the probability of them getting Sector 1 is higher (50%) than Sector 4 (5%). The user can still get sector 4 even though 5 users already have it. 

        label It is the text you want to show on the sector.
        code It is the coupon that you want to show once the user lands on that particular sector.
        win t should be marked as yes if you want to show the winning screen if the user gets this sector. If you want to show the losing screen on a particular sector, mark the win as no.
        color It is the color of every sector.

Scratch card template

      1. Change background image 
        To change the background image of the template, uncomment the style tag from lines 14 to 19 in the code and add the path of your image. 

      2. Change other images in the template like the win icon or lose icon
        The code has been commented in such a way that you would be easily able to find what to change where. To change images in the template, search for the <img> tag and replace the existing source with the source of your image. 

      3. Add or remove scratch card rewards
        The scratch card rewards are created using the "DATA" variable in the code. You can add or remove the rewards according to your use case. Make sure to have unique ids for all your rewards. 
        Screenshot_2023-04-14_at_6.51.57_PM.png
      4. Modify rewards
        You can modify each of the rewards by changing the value for each of the keys.
        Key Description
        id It is a unique number.
        weightage

        More the weightage, the more probable it is for the user to receive that sector on spinning the wheel. 

        Note: Weightage does not specify that a sector will be allotted only for a certain number of times for the users during the campaign duration.

        For example, you set weightages as - 
        Sector 1 - 50
        Sector 2 - 30
        Sector 3 - 15
        Sector 4 - 5

         In this case, weightage does not mean that sector 4 will be allotted to only 5 users for the entire campaign duration. It means that for the user this pop-up is visible, the probability of them getting Sector 1 is higher (50%) than Sector 4 (5%). The user can still get sector 4 even though 5 users already have it. 

        label It is the text you want to show on the sector.
        code It is the coupon that you want to show once the user lands on that particular sector.
        win t should be marked as yes if you want to show the winning screen if the user gets this sector. If you want to show the losing screen on a particular sector, mark the win as no.

Viewing campaign results

Clicks and data tracking has been added by default to the existing templates. If you add more buttons, make sure to add click tracking. To know more about tracking, refer to this document. 

You can view the results of your template by heading over to the Campaign info page after publishing the campaign. 

Screenshot_2023-04-14_at_6.55.39_PM.png

 

Coupon codes shown to the users are stored in the coupon_code attribute of the event - MOE_RESPONSE_SUBMITTED. This data will not tell you how many coupon codes were used by the user since that would be stored on your app. You can only get an idea of what coupon codes were shown to your users from this data. 

Screenshot_2023-04-14_at_6.55.02_PM.png

 

 

Was this article helpful?
7 out of 9 found this helpful

How can we improve this article?