AMP

动态地理个性化

未分类

AMP 文档通常由第三方缓存提供，这意味着如何支持动态或个性化内容并不总是很明确。有许多组件和技术可用于实现许多此类用例（amp-list、amp-state、amp-form和amp-iframe，仅举几例），但 AMP 团队可以简化一些常见情况。

特别是，企业通常希望根据用户的地理位置改变内容。对于不同语言的页面，最好的方法是使用hreflang 属性，但对于仅有少量地理相关变化的页面，例如针对特定区域的促销活动，这不是最佳解决方案。这就是我们创建 amp-geo 组件的原因，该组件已准备好进行测试，并计划在下周全面发布。

amp-geo

amp-geo可以根据用户国家/地区位置的近似值，轻松改变针对用户的网页内容的小部分内容，类似于ISO 国家/地区代码的级别。作为一名开发人员，只需执行以下几个步骤：

1. 在文档 head 中包含 amp-geo 脚本

<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>Code language: HTML, XML (xml)

2. 在文档 body 中包含 amp-geo 标签

<amp-geo layout="nodisplay"></amp-geo>Code language: HTML, XML (xml)

3. 使用 CSS 标记文档，以根据用户的近似位置更改内容。 

在 style[amp-custom] 标签中

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

/* override */
.amp-iso-country-ca .flag { background-image: "./mapleleaf.png"; }Code language: CSS (css)

在文档 body 中

<div height="300" width="500" layout="responsive" class="flag"></div>Code language: HTML, XML (xml)

amp-geo 中的分组

以下是一个稍微高级一些的案例，您可以在其中利用 amp-geo 中的分组功能，按地理位置改变英语方言的某个方面。

1. 如上所述，在文档的 head 中包含 amp-geo 脚本。

2. 不要只包含一个空的 amp-geo 标签，配置 ISOCountryGroups 以减少必须编写的代码量，以便跨多个区域指定行为。 在文档 body 中

<amp-geo layout="nodisplay">
	<script type="application/json">
		{
			"ISOCountryGroups": {
				"soccer": [ "au", "ca", "ie", "nz", "us", "za" ],
				"football": [ "unknown" ]
			}
		}
	</script>
</amp-geo>Code language: HTML, XML (xml)

3. 与之前的示例一样，使用 CSS 标记文档以根据用户的近似位置更改内容

在 style[amp-custom] 标签中

/* defaults */
.football:after { content: 'football';}

/* override */
.amp-geo-group-soccer .football:after { content: 'soccer' }Code language: CSS (css)

在文档 body 中

<div>
The game is called <span class='football'></span>!
</div>Code language: HTML, XML (xml)

如果用户位于为“足球”配置的任何区域设置中，则文本将显示为“该游戏称为足球！”否则，文本将显示为“该游戏称为橄榄球！”

您可以在 AMP by Example 中找到另一个更复杂的示例，并在 官方文档 中了解该功能的更多扩展功能；例如，您可以通过变量替换将 amp-geo 与您的分析集成，或通过 amp-bind 在更复杂的交互中使用它。

试用一下

amp-geo 计划在下周发布完整生产版本，但截至今天，您可以在您的网站上对其进行测试，并告诉我们您的想法。您可以在 Github 中提交错误和请求，并随时在 Slack 上联系我们并聊天。我们期待收到您的来信！

作者：AMP 产品经理 Eric Lindley