開発者向け
KontentとPardotを使用した静的サイトのパーソナライズ
By Ondrej Polesny
Jamstackとパーソナライズ：人々はそれが可能だと言いますが、パーソナライズが実装された実際のプロジェクトを紹介した人は誰もいません。今まで。
この記事では、パーソナライズとは何か、そしてそれが純粋にクライアント側でどのように機能するかについて説明します。 Auth0でホストされているページをSalesforcePardotおよびKontentに接続して、独自のアプリケーションのカスタマイズされたサインインページを有効にする方法を示します。この記事は、さまざまなクラウドサービスを使用する可能性があるため、一般的なハウツーチュートリアルではありませんが、読み終えると、これらすべてのサービスがどのように組み合わされているかを理解できます。
静的サイトのパーソナライズ
一般に、パーソナライズにより、Webサイトの訪問者のさまざまなセグメントにさまざまなコンテンツを提供できます。たとえば、訪問者が乗馬に関する記事だけを読んでいる場合、ドッグフードの割引を提供しますか？それとも、乗馬用品に関する広告からより良いコンバージョンを得るでしょうか？パーソナライズは、適切なコンテンツを適切な人々に配信するのに役立ちます。
従来のセットアップでは、訪問者に関するすべてのデータを所有するのはサーバーであるため、パーソナライズはサーバー側で簡単に実行できます。ただし、事前に生成されたサイトでは、問題は次のとおりです。サーバーなしでどのようにパーソナライズできますか？
私は過去に静的サイトのパーソナライズについて書きました。ページを生成し、結婚式のすべての参加者に関連するコンポーネントのみをレンダリングする方法を説明しました。そのアプローチはうまく機能しましたが、すべての訪問者がそれぞれの生成されたページの一意のURLを持っている必要がありました。
しかし、通常、その可能性はなく、匿名データを処理する必要があります。したがって、次のことを行う必要があります。
- 訪問者に関する十分なデータを収集する
- パーソナライズのルールを定義する
- パーソナライズされたコンテンツを作成する
- それを実装する
これらのステップは、常に何らかの形で存在します。優れた従来のCMSは通常、これらすべての手順を処理し、構成のみを必要とします。静的サイトでは、このタスクのための一連のツールが必要です。
訪問者に関する十分なデータを収集する
このタスクは、Google Analyticsがページのパフォーマンスを追跡するのと同じように、サイトでの訪問者のアクションを追跡することによって処理されます。 Salesforce Pardotを使用して、ページビューやフォーム送信などのアクティビティを追跡します。訪問者がフォームの送信、ニュースレターのリンクのクリック、またはウェビナーへの登録を介して電子メールアドレスを提供することにより、自分の身元を明らかにすると、パーソナライズの可能性ははるかに広がります。
次に、Pardotを会社のCRMまたはIntercomなどのツールに接続してアプリ内通信を行うことができます。これらのシステムはすべて、訪問者が提供した電子メールアドレスを知っています。そうすれば、次のステップのために訪問者のすべての可能な詳細を取得できます。
パーソナライズのルールを定義する
十分なデータが得られたら、パーソナライズのルールを定義する必要があります。データ収集にSalesforcePardotを使用することを説明したので、同じツールにパーソナライズルールの計算を処理させることだけが意味があります。セグメンテーションの可能性は、使用するツールによって異なり、多くの場合、次のようなものがあります。
- アクションに基づいて訪問者をペルソナにグループ化する
- 地理的な場所に基づいて訪問者をグループ化する
- 個人の電子メールアドレスと会社の電子メールアドレス、過去に製品に興味を示したかどうかなど、所有している情報に基づいて訪問者をグループ化します（この情報は計算またはインポートできます）
私たちのパーソナライズは、訪問者のプロファイルのカスタムフィールド「製品内-サインイン」に基づいています。このフィールドは、Pardotの動的コンテンツ機能を介して公開されます。この機能を使用すると、デフォルト値を設定することもできます。
これがどのように機能するかを例で示します。パーソナライズは、複数の条件を含む自動化プロセスによって推進されます。まず、G2レビューを奨励したいインポートされた人々のリストに訪問者が含まれているかどうかを確認します（1）。その場合、「In-product-SignIn」フィールドを値「g2_review」に調整し（2）、PardotがそれぞれのCTAボタンでクリックアクティビティを登録するかどうかを確認するために最大2週間待ちます（3）。
このプロセスには他にも多くの条件が含まれていますが、あなたはその考えを理解していますよね？
フィールド「製品内-サインイン」の値は、ヘッドレスCMSのコンテンツアイテムコードネームに対応します。フィールドの値を変更することにより、その特定の訪問者に表示される内容を効果的に変更します。
パーソナライズされたコンテンツを作成する
訪問者のグループを特定したら、パーソナライズされたコンテンツを作成する必要があります。セグメント化されたグループごとに1つのバリアントが必要です。私たちの場合、コンテンツ作成を完全に自由にしたかったので、コンテンツタイプとコンテンツアイテムを多数作成しました。これにより、コンテンツだけでなくその構造もパーソナライズできるため、シンプルなCTAを表示できます。また、ウェビナーの招待状や紹介文もあります。
それを実装する
すべてのデータ、パーソナライズルール、およびコンテンツが定義されたときにのみ、コードの作業を開始できます。サインインページはAuth0で完全にホストされており、HTMLコードしか挿入できないため、クライアント側でパーソナライズを実装する必要がありました。他のJamstackサイトと同じ方法です。
では、実装はどのように機能しますか？
まず、ページがJavaScriptバンドルをロードして実行します。次に、JavaScriptを使用して、表示する必要のあるページバリアントをPardotに要求します。
postscribe('#pardotID', '<script type='text/javascript' src='{pardot_tracker_url}'><\/script>', {
done: function () {
var itemToDisplay = getItemToDisplay();
getContent(itemToDisplay);
});
Pardotは既に訪問者を認識しているため、訪問者のプロファイルから「製品内-サインイン」フィールドの要求された値を簡単に返すことができます。トラッカーは次のように応答します。
document .write( 'the_state_of_jamstack_2020_report' );
これは、Pardotが訪問者に表示するコンテンツアイテムのコードネームです。したがって、訪問者のブラウザは、実際のコンテンツについてKontentに別の要求を行い、それを表示します。
fetch( 'https://deliver.kontent.ai/111e467b-6008-006d-7da0-df9b9e015029/items/the_state_of_jamstack_2020_report' ) .then( function ( response ) { return response.json(); }) .then( function ( data ) { var html = getHTML(itemToDisplay, data); container.innerHTML = html;
getHTML関数は、アイテムのタイプに基づいてHTMLテンプレートを選択する単純なスイッチです。このコードはすべてクライアント側であり、すべてのテンプレートがJavaScriptに含まれています。
最終結果は次のようになります。
または、サインインページで自分でチェックしてください。ただし、すでにKontentを使用している場合は、そこにさまざまなコンテンツが表示される可能性があることに注意してください😎。
マーケターは、制作ページを使用して、パーソナライズバリアントのプレビューを確認することもできます。 Pardotを使用すると、表示されるバリアントに影響を与える1回限りのパーソナライズCookieを設定できます。
異なるバリアントのCookieが設定されると、ページは次のようになります。
Jamstackサイトのパーソナライズ
パーソナライズはAuth0によってホストされる動的ページで実行されますが、実装は純粋なクライアント側のJavascriptであり、どのJamstackサイトでも同じように機能します。このコードには、すべてのバリアントのHTMLテンプレートが含まれており、実行時に受信したコンテンツに基づいて適切なテンプレートを選択します。ただし、すべてのバリアントを静的ページに事前レンダリング（解決）して、表示するバリアントをクライアント側のパーソナライズスクリプトにのみ決定させることもできます。
パーソナライズの未来
この記事では、ヘッドレススペースでパーソナライズがどのように機能するか、およびクライアント側のJavascriptを使用して使用するツールを接続する方法を示しました。そして、最高のものは？データベースのスケーリング、トラフィックピークの処理、ビッグデータ計算の最適化などについて心配する必要はありません。ツールはあなたのためにそれを行います。あなたはあなたの訪問者のために純粋に最高のコンテンツに集中することができます。
詳細やご不明な点がございましたら、お気軽にお問い合わせください。
