ゴーストでダイナミックなCTAをつくってください

誰かが何かをするのは難しいです.彼らにメールを入力するか、ボタンをクリックするように頼むことは、foregone結論でありません.

Clicking is hardwork 😅

しかし、創作者として、それはまた、効果的なCTAsを考え出すのは難しいです.
With Ghost's テンプレート層は、工場のCTAの実行よりも動的にコピーを生成することにより、約束を増やすことができます.以下に、あなたのポストテンプレートでこれらのダイナミックなCTAsを簡単に作成する方法をあなたに教えます.

基本的なCTA
我々は、我々の読者に無料のニュースレターにサインアップするよう頼む単純なCTAから始めます.
ゴースト提供template magic 我々は、任意のページに署名フォームを追加するために使用することができます.加えることによってdata-members-form 属性をform 要素は、我々は、加入者の電子メールをキャプチャし、サインアップフローを開始する幽霊を伝えることができます.
この作業を行うには、data-members-email 入力要素に属性を指定し、フォームを送信するボタンを含みます.

<p>Your life is missing something...</p>

<p>Sign up for our free newsletter and get the goodness right in your inbox.</p>

<form class="form" data-members-form >
  <label>Email <input type="email" required data-members-email />
  </label>
  <button>
    <span class="loading">Loading...</span>
    <span class="default">Sign Up</span>
    <span class="success">Check Your Inbox!</span>
    <span class="error">Error! Try again</span>
  </button>
</form>

基本的なCTA
フォームの要素のクラスをトグルすることによって、ゴーストのテンプレートマジックも自動的にフォームに状態を追加します.これらのクラスは既存のクラスとマージされ、状態が更新されると削除されます.

<form class="loading"... : ユーザーのクリック後に追加

<form class="success"... : サインアップが成功するとき、加えられます

<form class="error"... : サインアップが失敗したときに追加

移動する前に、我々はユーザーエクスペリエンスへの即時の改善を行うことができます.たった今、それがテーマに加えられる所で、このCTAは存在します.つまり、既にメンバーになっていても、ユーザがそれを見ているということです.
を使用して@member オブジェクトと{{#if}} ヘルパーは、サインアップフォームが表示されるときに制御することができます.前のキャレット(^ )if 以下のコードで、ifヘルパーと手段を反転させます:現在のユーザーが署名されたメンバーでないならば、この内容を示してください.言い換えれば、CTAは署名されていないユーザーにのみ表示されます.

{{^if @member}}

  <form class="form" data-members-form>
    ...
  </form>

{{/if}}

@メンバーオブジェクトの使用

サインアップフォームのスタイリング
既定値、ローディング、成功、エラー状態を表示および非表示にするには、次のようにCSSを追加する必要があります.
上記のマークアップにおいて、テキストはテキスト(「読み込み...」)で示されます.しかし、あなたは簡単にはなく、または代わりにアイコンを使用することができますテキストに加えて、原則と同じです.

/* Hide stateful content */
.form .loading, 
.form .success,
.form .error {
    display: none;
}

/* Show stateful content */
.loading .loading,
.success .success,
.error .error {
    display: initial;
}

/* Hide default when stateful content is shown */
.loading .default,
.success .default,
.error .default {
    display: none;
}

隠すと表示状態にスタイリング

ダイナミックCTA
メンバーデータは、すべてのゴーストテンプレート層を介してアクセスする必要はありません.ポストのコンテキスト内では、そのタイトル、タグを含むデータにアクセスできます.and more .
このデータを使用して動的なCTAを生成できます.

{{! Make sure you're in the post context}}
{{#post}}

  {{! Only show the CTA if user is not a signed-in user }}
  {{^if @member}}

    <p>What if you never had the chance to read <em>{{title}}</em> or my other articles about 
    <a href={{primary_tag.url}}>{{primary_tag.name}}</a>
    ?</p>

    <p>Avoid the possibility of your life getting much worse by subscribing to my newsletter. It's totally free.</p>

    <form class="form" data-members-form>
      <label>Email <input type="email" required data-members-email />
      </label>
      <button>
        <span class="loading">Loading...</span>
        <span class="default">Sign Up</span>
        <span class="success">Check Your Inbox!</span>
        <span class="error">Error! Try again</span>
      </button>
    </form>

  {{/if}}

{{/post}}

ダイナミックCTA
あなたのニーズに合うようにコピーを見つける必要がありますが、ここでのアイデアは、自動的にポストのデータに基づいてCTAを更新することです.「私の素晴らしいニュースレターにサインアップしてください」と言う代わりに、「私の記事のタイトルを読むことは本当に素晴らしかったです.Xトピックについての他のポストを逃して、ニュースレターのためにサインアップしないでください.」
上の例では、記事のタイトル、その主なタグ、およびそのタグへのリンクを参照しているので、読者は同じ主題の他のポストを探索することができます.ポストオブジェクト内では、ポストの著者(s)、説明、出版日、抜粋、さらには、すべてのあなたの聴衆を育てるために創造的なCTAsを構築するために使用することができますにアクセスする必要があります.
ポストのCTAにこのデータを組み込むことは、行動への効果的な呼び出しを定式化する戦いのごくわずかな部分だけです.私は、しかし、手にいくつかのより多くのツールを持ってキックロバのコピーをクラフトであなたの創造性を刺激する、と私はあなたがこのチュートリアルから何かを取ることができれば、それはあなたの人生は確かにはるかに良い場合はsign up for my newsletter .