このチュートリアルでは、Web フォームのドロップダウン メニューでのユーザーの選択に基づいて、事前定義されたタグ (B2B、B2C など) を Mailchimp 購(gòu)読者に動(dòng)的に割り當(dāng)てる方法について詳しく説明します。この記事では、フロントエンド HTML 構(gòu)造を最適化し、バックエンド Express.js ロジックを調(diào)整して、ユーザーの選択內(nèi)容を正確にマップして Mailchimp のタグ配列にプッシュできるようにする方法を説明します。これにより、正確なユーザー分類(lèi)とパーソナライズされたマーケティングを?qū)g現(xiàn)できます。

ユーザーのサブスクリプションまたは登録プロセスを構(gòu)築する場(chǎng)合、ユーザーの好みや業(yè)種に基づいてユーザーを分類(lèi)することは、パーソナライズされたマーケティングを?qū)g現(xiàn)するための重要なステップです。 Mailchimp は、タグ機(jī)能を通じて強(qiáng)力なユーザー セグメンテーション機(jī)能を提供します。このチュートリアルでは、Web フォームのドロップダウン選択項(xiàng)目を Mailchimp のタグ システムとシームレスに統(tǒng)合して、購(gòu)読者タグの動(dòng)的な割り當(dāng)てを?qū)g現(xiàn)する方法を開(kāi)発者に説明します。

基本原則

動(dòng)的なラベル割り當(dāng)てを?qū)g現(xiàn)するための核心は次のとおりです。

1. フロントエンド フォームの設(shè)計(jì):標(biāo)準(zhǔn)の HTML 要素を使用してドロップダウン メニューを作成し、POST リクエスト経由でデータを送信するには、それが
   タグで囲まれていることを確認(rèn)します。
   要素は name 屬性を定義する必要があり、各 要素は Mailchimp タグとして機(jī)能する value 屬性を定義する必要があります。
2. バックエンド データ処理:サーバー側(cè) (Node.js や Express の使用など) で、req.body を介してフロントエンド フォームによって送信されたドロップダウン選択値を取得します。この値は、Mailchimp API リクエストのデータ構(gòu)造、具體的には Subscriber オブジェクトのタグ配列に動(dòng)的に挿入されます。

フロントエンドフォーム設(shè)計(jì)（EJS例）

ドロップダウン メニューの選択をバックエンドが正しく受信できるようにするには、フロントエンドの HTML 構(gòu)造を調(diào)整する必要があります。重要なのは、 タグを使用し、それを

タグ內(nèi)に配置することです。

 
    <div class="mb-3">
        <label for="firstName" class="form-label">名</label>
        <input type="text" class="form-control" id="firstName" name="firstName">
    </div>
    <div class="mb-3">
        <label for="lastName" class="form-label">姓</label>
        <input type="text" class="form-control" id="lastName" name="lastName">
    </div>
    <div class="mb-3">
        <label for="email" class="form-label">メール</label>
        <input type="email" class="form-control" id="email" name="email">
    </div>

    <div class="ドロップダウン me-1 mb-3">
        <label for="dropDown" class="form-label">興味のあることを選択してください</label>
        <select name="dropDown" id="dropDown" class="form-select">
            <option value="" selected hidden>オプションを選択してください</option> <!--デフォルトで無(wú)効なオプション-->
            <option value="B2B">企業(yè)間</option>
            <option value="B2C">企業(yè)から消費(fèi)者へ</option>
        選択>
    </select>
</div>
    <button type="submit" class="btn btn-primary">購(gòu)読</button>

重要なポイントを説明:

• : フォームの送信先URLと送信方法を定義します。
• : name="dropDown" は重要です。バックエンドが req.body.dropDown 経由でこのドロップダウン メニューの選択値にアクセスするためのキーを定義します。
• および : value 屬性の値は、Mailchimp タグ名として直接使用されます。ユーザーが選択できるように、選択された無(wú)効なデフォルト オプションを含めることをお?jiǎng)幛幛筏蓼埂?/li>

バックエンドロジック処理 (Node.js/Express の例)

Express サーバー側(cè)では、POST リクエストを処理するルート內(nèi)のフロントエンドによって送信されたドロップダウン選択値をキャプチャし、それを Mailchimp API に送信されるデータ構(gòu)造に統(tǒng)合する必要があります。

 const Express = require('express');
const bodyParser = require('body-parser');
const app = Express();

// フォームデータを解析するために body-parser を設(shè)定します app.use(bodyParser.urlencoded({ extend: true }));
app.use(express.static("public")); // CSS/JS などの靜的ファイルがある場(chǎng)合
app.set('ビューエンジン', 'ejs'); // テンプレート エンジンを設(shè)定します // GET リクエストはフォーム ページのレンダリングに使用されます app.get('/', (req, res) => {
  res.render('インデックス'); // EJS ファイルの名前がindex.ejsであると仮定します。
});

// POST リクエストはフォーム送信の処理に使用されます app.post('/', (req, res) => {
  var firstName = req.body.firstName;
  var lastName = req.body.lastName;
  var email = req.body.email;
  selectedTag = req.body.dropDown; // ドロップダウン メニューの選択された値を取得します // Mailchimp API に必要なデータ オブジェクトを構(gòu)築します var mailchimpData = {
    status: "active", // サブスクリプション ステータス メンバー: [
      {
        email_address: 電子メール、
        status: "subscribed", // 購(gòu)読ステータス merge_fields: {
          FNAME: 名、
          LNAME: 姓、
        }、
        tags: [selectedTag], // 取得したタグをタグ配列に動(dòng)的に追加します}
    ]、
  };

  // Mailchimp API へのデータ送信をシミュレートします (実際のアプリケーションでは、Mailchimp API クライアントまたは HTTP リクエスト ライブラリの使用が必要です)
  console.log("Mailchimp に送信されるデータ:", mailchimpData);

  // 実際のアプリケーションでは、Mailchimp API 呼び出しはここで行われます // 例:
  /*
  const client = require("@mailchimp/mailchimp_marketing");
  client.setConfig({
    apiKey: "YOUR_MAILCHIMP_API_KEY",
    server: "YOUR_MAILCHIMP_SERVER_PREFIX", // 例: "us1"
  });

  非同期関數(shù) run() {
    試す {
      const response = await client.lists.batchListMembers("YOUR_LIST_ID", mailchimpData);
      console.log(応答);
      res.render('成功'); //購(gòu)読成功ページ} catch (error) {
      コンソール.エラー(エラー);
      res.render('失敗'); // 購(gòu)読失敗ページ}
  }
  走る（）;
  */

  res.send(`ユーザー ${firstName} ${lastName} (${email}) はタグ ${selectedTag} を選択し、購(gòu)読リクエストを処理しました。`);
});

const PORT = プロセス.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`サーバーは http://localhost:${PORT}` で実行されています`);
});

重要なポイントを説明:

• selectedTag = req.body.dropDown; : req.body オブジェクトを通じて、 タグの name 屬性 (dropDown) を使用して、ユーザーが選択した値にアクセスできます。
• tags: [selectedTag] : 取得した selectedTag 変數(shù)を配列要素として直接使用し、mailchimpData.members[0].tags に代入します。このようにして、ユーザーが選択したタグが Mailchimp にプッシュされます。

注意事項(xiàng)

1. フォーム検証:フォーム検証はフロントエンドとバックエンドの両方で実裝する必要があります。フロントエンド検証は即座にフィードバックを提供しますが、バックエンド検証は悪意のあるデータに対する最後の防御線、またはデータの整合性の確保です。
2. エラー処理: Mailchimp API 呼び出しが失敗する可能性があります (ネットワークの問(wèn)題、無(wú)効な API キー、ユーザーがすでに購(gòu)読しているなど)。バックエンドに堅(jiān)牢なエラー処理を?qū)g裝し、ユーザーに有意義なフィードバックを提供するようにしてください。
3. Mailchimp API の統(tǒng)合:実際のプロジェクトでは、Mailchimp の公式 Node.js クライアント ライブラリ (@mailchimp/mailchimp_marketing) をインストールして構(gòu)成するか、他の HTTP リクエスト ライブラリを使用して Mailchimp API と対話する必要があります。 API キーとサーバー プレフィックスが正しく構(gòu)成されていることを確認(rèn)してください。
4. ユーザー エクスペリエンス:ユーザーがフォームを送信した後に読み込みインジケーターを表示し、サブスクリプションが成功または失敗したときに明確なフィードバック ページまたはメッセージを提供することを検討してください。
5. セキュリティ: Mailchimp API キーなどの機(jī)密情報(bào)をクライアント コードに直接公開(kāi)しないでください。これらはサーバー側(cè)でのみ使用してください。

要約する

上記の手順により、Web フォームのドロップダウン メニューでのユーザーの選択に基づいて、Mailchimp 購(gòu)読者にタグを動(dòng)的に割り當(dāng)てる機(jī)能を?qū)g裝することができました。この方法は、ユーザー分類(lèi)の柔軟性と自動(dòng)化を向上させるだけでなく、その後のパーソナライズされたマーケティング活動(dòng)のための強(qiáng)固な基盤(pán)も築きます。正確なタグ管理により、視聴者をより深く理解してセグメント化し、よりターゲットを絞ったコンテンツを送信し、マーケティングの効果を向上させることができます。

以上がMailchimp 購(gòu)読者ラベルの動(dòng)的割り當(dāng)て: フォームのドロップダウン選択に基づく実裝チュートリアルの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。