Contenido

amp-geo

Description

Provides an approximate country-level geolocation interface.

Required Scripts

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

Supported Layouts

nodisplay

Ejemplos

amp-geo Geolocation-based Consent Flow

Usage

The amp-geo component provides country-level geolocation. The amp-geo component also provides a simple mechanism to group countries, making it easier to apply attributes to several countries at once.

The amp-geo component uses the country from which the request originated in the form of an ISO 3166-1 alpha-2 country code. The amp-geo component determines this code from the client's IP address. The ISO country code may not be the same as the top-level domain. For example, the code for the United Kingdom is gb not uk.

It's possible that an IP address with country information in the WHOIS database will not have country information in amp-geo. If the country cannot be determined, the value is set to unknown. If the grouping feature is used at least one group must contain unknown.

The amp-geo component provides CSS, amp-bind and variable substitution interfaces.

Generated CSS classes

If the amp-iso-country-XX class is applied to the body element, where XX is replaced by the ISO country code or with the value unknown, you can use CSS to modify the body element.

In the following example, we add <amp-geo> to determine the user's location so that we can display the appropriate flag.

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

If the user is in Canada, the amp-geo component applies the amp-iso-country-ca CSS class to the body tag. We can then use CSS to apply the correct background image for Canada:

/* defaults */
.flag {
  background-image: './starsandstripes.png';
}
/* override */
.amp-iso-country-ca .flag {
  background-image: './mapleleaf.png';
}

Optional configuration for grouping locations

Optionally, you can include a JSON configuration script in the amp-geo tag. The ISOCountryGroups key allows selections by groups of country codes.

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

If country groups are specified, amp-geo iterates through the groups. For any group that contains the current country, a class named amp-geo-group- followed by the group name is added to <body>. Group names may only contain a-z, A-Z and 0-9, and may not start with a digit. If no country group is matched the class amp-geo-no-group is added to body.

Example: Generated CSS classes

<body class="amp-geo-group-football amp-iso-country-gb …"></body>

Example: Using CSS classes and country groups to change "soccer" to "football"

In the following example, we determine if the user is in a "soccer" country and display a "football" message for those users.

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

If the user is in one of the "soccer" countries, the amp-geo-group-soccer CSS class is applied to the body tag.

/* defaults */
.football:after {
  content: 'football';
}
/* override */
.amp-geo-group-soccer .football:after {
  content: 'soccer';
}

Then it's trivial to use CSS select the correct word (i.e., football).

<div>The game is called <span class="football"></span>!</div>

Preset Country Groups

In addition to user specified country groups amp-geo supports preset country lists. See amp-geo-presets.js for the available preset lists.