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

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

2018年5月25日金曜日

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

1

2

3

In the document <head>:

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

In the document <body>:

<amp-geo layout=”nodisplay”></amp-geo>

In the <style amp-custom> tag:

/* defaults */

.flag { background-image: "./starsandstripes.png"; }

/* override */

.amp-iso-country-ca .flag { background-image: "./mapleleaf.png"; }

In the document <body>:

<div height=”300” width=”500” layout=”responsive” class=”flag”>

</div>

amp-geo のグループ

In the document <body>:

<amp-geo layout=”nodisplay”>

  <script type="application/json">

  {

    “ISOCountryGroups”: {

      "soccer": [ "au", "ca", "ie", "nz", "us", "za" ],

      "football": [ "unknown" ]

    }

  }

  </script>

</amp-geo>

In the <style amp-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 <span class='football'></span>!

</div>

AMP by Example公式ドキュメント試してみるGithub でバグやリクエストについてお知らせいただいたり、
Reviewed by Yoshifumi Yamaguchi - Developer Relations Team