見出し画像
Photo by yokoichi

【第322回】 AMPscript を使った「繰り返し」カード表示（2 列表示）の作り方

Nobuyuki Watanabe

前回の記事では、AMPscript を使った「繰り返し」リスト表示（1 列表示）の作り方について説明をしました。

今回は、AMPscript を使った「繰り返し」カードの 2 列の表示、そして 3 列表示となった場合は、どのように記述すれば良いか解説します。

AMPscript を使ったランキングリストの作成手順

今回の最終的な成果物としては、以下のような製品ランキングリストを含むメールの作成を目指します。左側が 2 列表示で、右側が 3 列表示です。

ステップ 1：データの準備

まず、ランキング情報が格納された CSV ファイルをデータエクステンションにインポートします。本来であれば、Marketing Cloud Engagement の中で自動生成したり、外部システムから直接連携しますが、今回は手動でインポートします。

今回、このランキング情報が格納されているデータエクステンション名を 「RankingDE」 と命名します。後ほど AMPscript 内で参照します。

以下の通り、データエクステンションにインポートすることができました。

インポートされたデータエクステンションには、以下の項目が含まれており、それぞれの役割は以下の通りです。

  • Id：プライマリーキー

  • Rank：ランキングの順序を決定

  • Genre：ジャンルの指定

  • Artist, Title, Price：製品詳細

  • ImageURL：製品画像

  • LinkURL：製品リンク

Genre に関しては、送信用データエクステンション内の「FavoriteGenre」フィールドの値（例：Rock や Jazz）を基に、該当するジャンルのランキングをパーソナライズして表示することを目的としています。

練習用データ

練習用データとして、今回の CSV ファイルをアップロードしました。自由に編集して、お好みのデータを使って試してみてください。この CSV ファイルをそのまま使用して練習する場合は、以下の設定を行ってください。

  • Rank と Price は数字型

  • 各 URL の項目はテキスト型（2000 文字）

ステップ 2：メールレイアウトの作成

1. まずメールキャンバスで「1 列のレイアウト」が存在しているので、今回はそのレイアウトを活用します。

Pro Tips：レイアウトを活用することがポイントです。レイアウトは複数のコンポーネントを一つの参照コンテンツブロックとしてまとめて管理できるため、個別の参照コンテンツブロックを複数用意するよりも、効率的で簡単に管理できます。

2. メールキャンバスにドラッグ＆ドロップをしたら、まずは用意してあるランキングを 1 つ分を完成させて、その見た目を整えます。この 1 つ分がループをして表示されますので、丁寧に仕上げてください。

3. 作成したデザインを元に、以下で示す AMPscript を使用して動的に情報を差し替えます。

1. 画像 URL：
%%=Field(@row,'ImageURL')=%% に差し替えます。（ImageURL などは皆さんの項目名に置き換えてください。Width は 100% に設定しています。）

2. リンク URL：
こちらは少し特殊な書き方で %%=RedirectTo(Field(@row,'LinkURL'))=%% と記入します。遷移用のリンクとして活用するために「RedirectTo」が使用されていることに注目してください。

3. テキストフィールド：
%%=Field(@row,'[フィールド名]')=%% を使用します。（今回の例：Rank, Artist, Title 等。）事前に作成したスタイルなどを維持するためには、HTML Code Editor で作業することをおすすめします。但し、URL リンクの貼り付けは WYSIWYG Editor から行いましょう。

4. 金額表示：
今回の金額表示は 3 桁ごとにカンマを追加したいので、以下を使用します。
%%=FormatNumber(Field(@row,'Price'),"N0")=%%

4. ここまで作業を終えた段階で、プレビュー画面が崩れてしまうことがありますが、これは正常です。最後に、完成したレイアウトをテンプレートとして保存します。画面左下に保存ボタンがあります。

5. テンプレートを保存すると、コンテンツブロック ID が取得できるようになります。

6. コンテンツブロック ID 取得後、以下のようにその ID を参照コンテンツである %%=ContentBlockById()=%% に反映します。

%%=ContentBlockById(44244735)=%%

ループの AMPscript サンプル

さて、今回の場合は、以下のコードを使用して、データエクステンションの内容を取得しながらループで表示します。

■ 2 列表示の方法

まずは、2 列表示のコードから確認しましょう。

<table width="100%">
  <tr>
    %%[ 
      VAR @lookup, @count, @row, @totalItems, @extraTd
      SET @lookup = LookupOrderedRows(
        'RankingDE', 
        6, 
        'Rank asc', 
        'Genre', FavoriteGenre
      )
      SET @totalItems = RowCount(@lookup)

      IF @totalItems > 0 THEN
        FOR @count = 1 TO @totalItems DO 
          SET @row = Row(@lookup, @count)
    ]%%

    <td class="" style="width: 48%; padding-right: 10px; padding-left: 10px;" valign="top">


    <!--- ここに参照コンテンツを挿入 --->
    %%=ContentBlockById(44244735)=%%


    </td>

    %%[ 
          IF Mod(@count, 2) == 0 THEN 
            OUTPUT(CONCAT("</tr><tr>")) 
          ENDIF
        NEXT @count

        IF @totalItems < 2 THEN
          SET @extraTd = 2 - @totalItems
          FOR @i = 1 TO @extraTd DO
            OUTPUT(CONCAT("<td style='width: 48%;'></td>"))
          NEXT @i
        ENDIF
      ENDIF 
    ]%%
  </tr>
</table>

ここで %%=ContentBlockById(44244735)=%% をループで繰り返し表示することで、ランキングリストが動的に構築されるわけですね。

ここで皆さんが作業する時に、編集が必要な箇所の説明をします。

  • 'RankingDE'：参照する先のデータエクステンション名

  • 6：メールに表示する行数

  • 'Rank asc'：並び順を決定し、「昇順 asc」や「降順 desc」を指定

  • 'Genre', FavoriteGenre：マッチングのための条件（例：Rock = Rock）

  • %%=ContentBlockById(44244735)=%%：表示したいテンプレート

他のコードは特に触らなくて大丈夫です。

注意：FavoriteGenre に対して「' '」を使用しないように注意してください。「' '」 を使用すると、「FavoriteGenre」という 固定値 になります。

実装例

AMPscript を メールの編集画面で HTML ブロックに配置します。

次に、配信用データエクステンションに「FavoriteGenre」フィールドを追加します。このフィールドを利用して、RankingDE の「Genre」とマッチングさせる形になります。（例：Rock = Rock、Jazz = Jazz のようなイメージ）

最後にその配信用データエクステンションを使って、プレビューを確認すると、以下のように動的なランキングリストが表示されます。

  • FavoriteGenre が Rock の場合

  • FavoriteGenre が Jazz の場合

成功です。今回は試しませんが、リンク URL が正しく遷移することも確認してください。正しく遷移するには「RedirectTo」が必要ですので、遷移しない場合は、「RedirectTo」が含まれているか確認してください。

■ 3 列表示の方法

3 列表示の場合も、コードを示しておきます。

<table width="100%">
  <tr>
    %%[ 
      VAR @lookup, @count, @row, @totalItems, @extraTd
      SET @lookup = LookupOrderedRows(
        'RankingDE', 
        6, 
        'Rank asc', 
        'Genre', FavoriteGenre
      )
      SET @totalItems = RowCount(@lookup)

      IF @totalItems > 0 THEN
        FOR @count = 1 TO @totalItems DO 
          SET @row = Row(@lookup, @count)
    ]%%

    <td class="" style="width: 32%; padding-right: 3px; padding-left: 3px;" valign="top">


    <!--- ここに参照コンテンツを挿入 --->
    %%=ContentBlockById(44244735)=%%


    </td>

    %%[ 
          IF Mod(@count, 3) == 0 THEN 
            OUTPUT(CONCAT("</tr><tr>")) 
          ENDIF
        NEXT @count

        IF @totalItems < 3 THEN
          SET @extraTd = 3 - @totalItems
          FOR @i = 1 TO @extraTd DO
            OUTPUT(CONCAT("<td style='width: 32%;'></td>"))
          NEXT @i
        ENDIF
      ENDIF 
    ]%%
  </tr>
</table>

プレビューを確認すると、以下のように動的なランキングリストが表示されます。

  • FavoriteGenre が Rock の場合

  • FavoriteGenre が Jazz の場合

成功です。

いかがでしたでしょうか。

前回の記事でご紹介した「リスト表示」でも「カード表示」でも、基本的な実装方法は共通しています。ただし、ループ処理のしやすさで言えば「リスト表示」の方が圧倒的にシンプルです。一方で、「カード表示」の場合は、表示件数が 1 件だけの場合や不足分への対処が必要になるため、少し複雑な処理が求められています。今回、その点を考慮した設計になっています。

また、今回の「カード表示」では画像サイズをシンプルに width:100% に設定しました。しかし、この方法は参照する画像が正方形である場合にのみ綺麗に表示されます。正方形以外の画像が含まれる場合は、レイアウトが崩れる可能性がありますのでご注意ください。

最後に、ContentBlockById で参照されるコンテンツは、一度ジャーニーをアクティブ化してメールが送信されると、キャッシュが作成されるため、参照しているコンテンツの中身を変更したとしても、既にジャーニー上で稼働しているコンテンツの中身は自動的に変更されません。以下の記事で、その中身を変更する技術を公開していますので、併せてご確認ください。

今回は以上です。


次の記事はこちら

前回の記事はこちら

私の note のトップページはこちら