ノーコード ゲーミフィケーション テンプレート

概要

MoEngageは、アプリ内メッセージングキャンペーンのためのコード不要のゲーミフィケーションテンプレートを提供します。これらのテンプレートは、コードを書く必要のないエディターで完全にカスタマイズできます。

これらのテンプレートにアクセスするには、次の手順を実行してください。

  1. アプリ内キャンペーン作成ページの コンテンツ ステップに移動します。
  2. サイドメニューから、 エディターでフィルタリング セクションの下で、 コード不要のゲーミフィケーション を選択します。
    2025-09-09_12-29-23 (1).gif

MoEngageは4種類の スピン・ザ・ホイール テンプレートを提供しています。

スクリーンショット 2025-09-09 午後12時31分54秒.png

次のセクションでは、これらのテンプレートの設定方法について説明します。

info

情報

すべてのゲーミフィケーションテンプレートは、既存のMoEngage SDK統合と連携します。これらのキャンペーンをすぐに作成して開始することができます。

ホイールを回すテンプレート

スピン・ザ・ホイールのテンプレートを使用すると、ユーザーを引き付けて報酬を与えるためのインタラクティブな賞品ホイールを作成できます。

スクリーンショット 2025-09-09 午後1時51分21秒.png

ユースケース

  • 報酬を配布する: ユーザーに割引や特別オファー、その他の報酬を獲得するチャンスを魅力的な方法で提供します。
  • ユーザーエンゲージメントの向上: アプリに楽しさの要素を加えて、再訪問やセッション時間の延長を促しましょう。
  • リードを生成する: ユーザーにメールアドレスまたは電話番号を入力させて、ホイールを回すチャンスを提供し、新しいリードを獲得します。

このテンプレートのエディターは、主に3つのタブに分かれています: スピンホイール 勝利画面 、および 敗北画面

スクリーンショット 2025-07-21 午前11時55分03秒.png

スピンホイールタブを設定する

スピンホイール タブでは、ホイール自体の主な外観と動作をカスタマイズできます。

2025-09-09_11-52-29 (1).gif

セクション カスタマイズオプション
テンプレート設定
  • 許可されているデバイスの向き: 縦向き 横向き 、または両方を選択します。
    テンプレートを希望の向きでプレビューできます。 プレビュー セクションで、 縦向きおよび横向き 表示 をクリックします。
    スクリーンショット 2025-09-09 午後1時54分00秒.png
  • 許可されているデバイスタイプ: モバイル タブレット TV OS 、またはすべてを選択します。
  • テンプレートの背景画像: 画像をアップロードするか、画像URLを提供するか、背景色を選択して背景を設定します。
  • 閉じるボタン: 閉じるボタンの表示、タイプ、配置(右/左)を設定します。
  • ボーダー: テンプレートのボーダー幅、半径、色を調整します。
Text 見出し サブ見出し をカスタマイズします。それぞれについて、テキストコンテンツ、フォントサイズ、色、配置、幅、マージン、パディング、境界線を編集できます。アクションを追加することもできます。
スピンホイールをカスタマイズ
  • ホイールとポインターのサイズ: 、または を選択してください。
  • ポインターの位置: ポインターの位置を調整します。
  • 境界線: ホイールの境界線の幅と色を設定します。
ホイールセクター
  • セクターの追加/削除: 最大10個のセクターを設定します。
  • セクター設定: 各セクターに対して、 タイトル を設定し、 クーポンコード リストを割り当て、オプションで画像を追加できます。
    注意 : パーソナライズされたクーポンコードを追加できます。
    そのためには、次の手順に従ってください:
    1. クーポンコード フィールドで@を入力します。
    2. クーポン タブに移動し、リストから希望のクーポンを選択します。詳細については、 こちら を参照してください。
      スクリーンショット 2025-09-09 午後12時41分38秒.png
  • 勝率を設定: セクターに着地する確率を制御するための数値の重みを設定します。勝率はこれらの重みから自動計算されます。
  • 敗北オプション: セクターを非勝利の結果として指定します。
  • 頻度キャップ: 特定の報酬が獲得される回数に制限を設定します。
リードジェネレーションのカスタマイズ
  • ユーザーデータをキャプチャするための入力フィールドを構成します。 フィールドサイズ をカスタマイズし、最大2つの フィールドタイプ メール テキスト 日付 数値 電話 日時 )を追加します。 フォントサイズ フォントカラー 背景色 、および 境界線 を設定します。
    選択したフィールドタイプに対して、リストから希望する ユーザー属性 を選択できます。
  • 利用規約を 設定する 。利用規約の文言を追加する必要があります。
  • フォーム送信ボタンをカスタマイズし、そのテキスト、フォントサイズ、フォントカラー、ボタンカラー、半径を編集します。

勝利画面タブを設定する

Winning screen タブでは、ユーザーが賞品を獲得した際に表示される画面をカスタマイズできます。これには、紙吹雪の効果や彼らが獲得したクーポンコードのような祝賀要素が含まれています。

2025-09-09_11-59-38 (1).gif

セクション カスタマイズオプション
テンプレート設定
  • 許可されているデバイスの向き: 縦向き 横向き 、または両方を選択します。
  • 許可されているデバイスの種類: モバイル タブレット 、または TV OS を選択してください。
  • テンプレートの背景画像: 画像をアップロードする、画像リンクURLを提供する、または背景色を選択して背景を設定します。
  • 閉じるボタン: 表示をカスタマイズし、ボタンタイプ(例: ブラック薄型 - 高解像度)を選択し、その配置(右/左)を設定します。
  • 境界線: テンプレートの境界線の幅、半径、および色を調整します。
画像
  • テンプレートの背景画像: 画像をアップロードするか、画像リンクURLを提供して背景を設定します。
  • 幅、マージン、パディング: 画像の幅、マージン(上、右、下、左)、およびパディング(上、右、下、左)を調整します。
  • 境界線: 画像の境界線の幅、半径、色を調整します。
  • アクション: 画像にアクションを追加します。
Text
  • 見出し: 見出しのテキスト、フォントサイズ、フォントカラー、背景色、カスタムフォントのオプションをカスタマイズします。
  • 幅、マージン、パディング: テキストの幅、マージン(上、右、下、左)、およびパディング(上、右、下、左)を調整します。
  • 境界線: テキストの境界線の幅、半径、色を調整します。
  • アクション: テキストにアクションを追加します。
クーポンボックス
  • クーポンボックスタイプ: 塗りつぶし アウトライン 、または テキスト を選択します。
  • テキストとスタイリング: クーポンコードのテキストを入力し、そのフォントサイズ、フォントカラー、背景色をカスタマイズします。カスタムフォントも使用できます。
  • コピーアイコンを表示: コピーアイコンの表示を有効または無効にし、アイコンの色を設定します。
  • 幅、マージン、パディング: クーポンボックスの幅、マージン、パディングを調整してください。
  • 境界線: 境界線の幅、半径、色を調整します。
ボタン
  • ボタンサイズ: 小、中、大から選択してください。
  • ボタンタイプ: 塗りつぶし、アウトライン、またはテキストから選択してください。
  • テキストとスタイリング: ボタンのテキスト フォントサイズ フォントカラー 背景色 をカスタマイズします。また、カスタムフォントを使用することもできます。
  • ボーダー: ボタンのボーダーの幅、半径、色を調整します。
  • アクション: ボタンにカスタムアクションを設定します。例えば、 ナビゲーション ( 画面へのナビゲート ディープリンク リッチランディング ) などです。必要に応じてキーと値のペアを追加します。

敗北画面タブを設定

敗北画面 タブでは、非当選スピン用の画面をカスタマイズできます。カスタム画像と見出しを表示するように設定できます。

2025-09-09_12-01-39 (1).gif

セクション カスタマイズオプション
テンプレート設定
  • 許可されるデバイスの向き: 縦向き 横向き 、または両方を選択します。
  • 許可されているデバイスの種類: モバイル タブレット 、または TV OS を選択してください。
  • テンプレートの背景画像: 画像をアップロードするか、画像リンクURLを提供するか、背景色を選択して背景を設定します。
  • 閉じるボタン: 表示をカスタマイズし、ボタンの種類を選択し、その配置を設定します(右/左)。
  • 境界: テンプレートの境界の幅、半径、色を調整します。
画像
  • テンプレートの背景画像: 画像をアップロードするか、画像リンクURLを提供して背景を設定します。
  • 幅、マージン、パディング: 画像の幅、マージン、パディングを調整します。
  • 境界線: 画像の境界線の幅、半径、色を調整します。
  • アクション: 画像にアクションを追加します。
Text
  • 見出し: 見出しのテキスト、フォントサイズ、フォントカラー、背景色、カスタムフォントのオプションをカスタマイズします。
  • 幅、マージン、パディング: テキストの幅、マージン、パディングを調整します。
  • ボーダー: テキストのボーダーの幅、半径、色を調整します。
  • アクション: テキストにアクションを追加します。
ボタン
  • ボタンのサイズ: 、または を選択します。
  • ボタンタイプ: 塗りつぶし アウトライン 、または テキスト を選択します。
  • テキストとスタイリング: ボタンテキスト フォントサイズ フォントカラー 背景色 をカスタマイズします。カスタムフォントを使用することもできます。
  • ボーダー: ボタンのボーダー幅、半径、および色を調整します。
  • アクション: ボタンにカスタムアクションを設定します。たとえば、 ナビゲーション ( 画面への移動 ディープリンク リッチランディング ) や必要に応じてキーと値のペアを追加します。

トラッキングと分析

MoEngageは、キャンペーンのパフォーマンスを測定するのに役立つ主要なインタラクションを自動的に追跡します。

  • In-app shown : ホイールを回すポップアップが表示された回数。
  • アプリ内クリック : スピン ボタンがクリックされた回数。
  • Response submitted : スピン完了時にキャプチャされたイベントで、 sector_text coupon_code sector_weight 、およびキャプチャされたリード生成データのようなプロパティを含みます。

キャンペーン分析ページには、セクターごとの報酬分配レポートも含まれています。このレポートは、各セクターがどのようにパフォーマンスを発揮したかの集計分析を示しています。

よくある質問(FAQ)

arrow_drop_down テンプレートに追加したカスタムボタンやリンクのクリックを追跡するにはどうすればよいですか?

テンプレートエディターでは、各ボタンに対するアクションを定義でき、カスタムイベントのトラッキングも含まれます。ボタンのアクションを設定するとき、「Track Event」アクションを追加し、キャプチャしたいイベント名とプロパティを指定できます。

arrow_drop_down 「SPIN」など、スピン・ザ・ホイールボタンのテキストを変更できますか?

はい。 スピンボタン コンポーネントは完全にカスタマイズ可能です。HTMLを編集することなく、エディタ内でテキスト、フォント、色、サイズを直接変更できます。

arrow_drop_down ユーザーがどのクーポンを獲得したかを追跡するにはどうすればよいですか?

Spin the Wheel のために自動的に追跡される Response submitted イベントには、ユーザーに割り当てられた coupon_code が含まれています。このイベントをキャンペーン分析で分析して、クーポンの配布状況を確認できます。

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています

How can we improve this article?