メインコンテンツにスキップ

ボタン設定

ト
対応者:トライハッチCS

■目的

ユーザーにクリックを促すボタンを設置することができます。

最大で5つ設置することができ、テキストボタン/画像のボタン/HTML/CSSの3パターンがございます。

クリエイティブに沿ってお選びください。

■設定方法

  1. ボタンの配置
    ボタンの配置では設定したCTAボタンの位置を細かく設定することが可能です。

    ・配置:以下の整列機能となります。
        左揃え/中央揃え(X軸)/右揃え
        上揃え/中央揃え(Y軸)/下揃え
    ​
    ・位置:%の数値で設定することも可能です。
        各ブロックの%を合わせることで同じ位置にCTAボタンを設置することができます。
    ​
    ・CTAボタンの移動方法:
     右側のプレビュー画面のCTAボタンをクリックした後に、キーボードの矢印キーで1%ずつ上下左右に動かすことができます。
     また、プレビュー画面にてCTAボタンをドラッグ&ドロップして大きく配置を動かすことも可能です。
     矢印キーもしくはドラッグ&ドロップで動かした場合、「位置」の%に数値が反映されます。
    ​

  2. タイプ選択
    テキストボタン/画像をアップロード/HTML/CSSの3つからお選びください。
    ​

  3. テキストボタンの場合
    ボタンテキストを記入してください。またフォントサイズやボタンそのもののサイズを設定することも可能です。比率をロックにチェックを入れた状態でボタンの縦サイズを変更すると自動的に横サイズも変更されます。


    また、ボタンの色やテキストカラーを変更することも可能です。


    マイクロコピーでボタンの詳細テキストを設置することもできますし、そのテキストの色や位置を変更することも可能です。


    ボタンの形は4種類あり、アニメーションをつけることでクリックを促すことも可能です
    ​

  4. 画像をアップロードの場合
    ボタンに設定したい画像をアップロードして、サイズや位置を変更することができます。

  5. ​HTML/CSSの場合
    好きなデザインでCTAボタンを作成したい場合は、HTML/CSSを入力することで、独自のCTAボタンを設置することができます。

  6. ラインカラーについて
    ボタン設置時に中央がどこか分かりやすくするために、プレビュー画面で素材を動かした際にだけセンターラインが表示されます。
    ラインカラーはそのセンターラインの色を変更し、見やすくすることができます。


    ​

  7. CTAボタンを固定
    CTAボタンを自由に設置できる反面、媒体によって微妙にボタンの位置が変わってしまいます。
    媒体によってボタンの位置を変えたくない場合は「CTAボタンを固定」をONにしてください。
    ONにすると、中央下部に表示させることが可能です。


    ​

  8. CTAタップ後のアクション
    CTAボタンの遷移先を設定することができます。


    遷移先は内部URLへの移行/外部URLへ移行/特定ブロックへの移行/JavaScripyを実行する/アンケートに移動の5つを選択することができます。
    別サイトに遷移させたい場合は、「外部URLへ移行」をご選択ください。
    Javascriptはトラッキングを確実に発火させたり、遷移前のモーダルのUIを出したりとカスタマイズされたCTAボタンにさせたい場合は、ご利用ください。


​

■注意■

設定したCTAボタンを削除する際は、それまでに計測された分析データも削除されますので、お気をつけください。

こちらの回答で解決しましたか?