地理的ロケーションに応じた動的なパーソナライズ

この記事は AMP プロダクトマネージャー、Eric Lindley による Accelerated Mobile Pages Project の記事 "Dynamic geo-personalization" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

多くの場合、AMP ドキュメントはサードパーティのキャッシュから配信されます。つまり、動的なコンテンツやパーソナライズされたコンテンツをサポートする方法が明確ではない場合があります。こうした多くのユースケースをサポートするさまざまなコンポーネント（amp-list、amp-state、amp-form、amp-iframeなど）とテクニックがありますが、AMP チームは、いくつかの一般的なケースをより簡単にサポートできるようにしました。

特に企業は、多くの場合、ユーザーの地理的ロケーションに応じてコンテンツを変更する必要があります。異なる言語のページに対してコンテンツを変更する最適な方法は、hreflang 属性を使用することですが、特定の言語 / 地域向けにプロモーションする場合など、地理的ロケーションに依存したバリエーションが少ないページに対しては、この属性の使用は最適なソリューションではありません。そのため、amp-geo コンポーネントを作成しました。このコンポーネントはすぐにテストすることができ、来週、フルリリースされる予定です。

amp-geo

amp-geoを使用すると、ISO 国コードのレベルに類似した、ユーザーの国レベルのおおよそのロケーションに基づいて、ウェブコンテンツのわずかな部分を簡単に変更できます。デベロッパーの皆さんは、この変更を数ステップで行うことができます。

1. amp-geo スクリプトを含めます。

1

2

3

In the document <head>:

<scriptasync custom-element="amp-geo"src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>

2. amp-geo タグを含めます。

In the document <body>:
<amp-geolayout=”nodisplay”></amp-geo>

3. ドキュメントを CSS でマークアップし、ユーザーのおおよそのロケーションに基づいてコンテンツを変更します。

In the <styleamp-custom> tag:
/* defaults */
.flag { background-image: "./starsandstripes.png"; }
/* override */
.amp-iso-country-ca .flag { background-image: "./mapleleaf.png"; }
In the document <body>:
<divheight=”300” width=”500” layout=”responsive” class=”flag”>
</div>

amp-geo のグループ

次に、少し高度なケースを紹介します。ここでは、amp-geo のグループ化機能を活用して、地理的ロケーションに応じて英語の方言的要素を変更しています。

1. 上記のように、ドキュメントに amp-geo スクリプトを含めます。

2. 空の amp-geo タグを含める代わりに、ISOCountryGroups を設定すると、複数の言語 / 地域に対して動作を指定するために記述する必要があったコード量を削減できます。

In the document <body>:
<amp-geolayout=”nodisplay”>
  <scripttype="application/json">
  {
    “ISOCountryGroups”: {
      "soccer": [ "au", "ca", "ie", "nz", "us", "za" ],
      "football": [ "unknown" ]
    }
  }
  </script>
</amp-geo>

3. 上記の例と同じように、ドキュメントを CSS でマークアップし、ユーザーのおおよそのロケーションに基づいてコンテンツを変更します。

In the <styleamp-custom> tag:
/* defaults */
.football:after { content: 'football';}
/* override */
.amp-geo-group-soccer .football:after { content: 'soccer' }
In the document <body>:
<div>
The game is called <spanclass='football'></span>!
</div>

「サッカー」と設定されている言語 / 地域にユーザーが存在する場合、テキストは、「この競技はサッカーと呼ばれます！」と表示されます。そうでない場合、テキストは、「この競技はフットボールと呼ばれます！」と表示されます。

もっと複雑な他の例については、AMP by Exampleをご覧ください。また、公式ドキュメントでは、この機能の詳細が解説されています。たとえば、変数置換を通じて amp-geo とアナリティクスを統合したり、amp-bind を介したより複雑なインタラクションで amp-geo を使用したりできます。

試してみる

amp-geo の完全な製品版は来週リリースされる予定ですが、現時点で、デベロッパーの皆さんは自分のサイトで amp-geo をテストできますので、ぜひご意見をお聞かせください。Github でバグやリクエストについてお知らせいただいたり、Slack にアクセスして自由にチャットできます。皆様からのフィードバックをお待ちしています。

Reviewed by Yoshifumi Yamaguchi - Developer Relations Team