amp-link-rewriter

描述

允许发布者根据可配置的模式重写 URL

必需的脚本

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

支持的布局

nodisplay

用法

amp-link-rewriter 允许发布者根据可配置的模式重写 URL。

必需的元素结构

添加必需的`script`

在 AMP 页面的 <head>...</head> 部分中，在 <script async src="https://cdn.ampproject.org/v0.js"></script> 行之前插入以下代码。

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

添加 `amp-link-rewriter` 组件

在 AMP 页面的 <body>...</body> 部分中，插入代码，如下例所示（必须针对每个供应商用例进行自定义）

<amp-link-rewriter layout="nodisplay">
  <script type="application/json">
    {
      "output": "https://visit.foo.net?pid=110&url=${href}&cid=${customerId}",
      "section": ["#product-listing-1", "#product-listing-2"],
      "attribute": {
        "href": "((?!(https:\/\/skip\.com)).)*",
        "id": "comments",
        "class": "sidebar",
        "rel": "(?!(skip))*"
      },
      "vars": {
        "customerId": "12345"
      }
    }
  </script>
</amp-link-rewriter>

完整示例

最终代码应如下所示

<!DOCTYPE html>
<html ⚡ lang="en">
  <head>
    ...
    <script
      async
      custom-element="amp-link-rewriter"
      src="https://cdn.ampproject.org/v0/amp-link-rewriter-0.1.js"
    ></script>
    ...
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    ...
    <amp-link-rewriter layout="nodisplay">
      <script type="application/json">
        {
          "output": "https://visit.foo.net?pid=110&url=${href}&cid=${customerId}",
          "section": ["#product-listing-1", "#product-listing-2"],
          "attribute": {
            "href": "`((?!(https:\/\/skip\.com)).)*`",
            "id": "comments",
            "class": "sidebar",
            "rel": "(?!(skip))*"
          },
          "vars": {
            "customerId": "12345"
          }
        }
      </script>
    </amp-link-rewriter>
    ....
  </body>
</html>

JSON 配置

`output`（必需）

output 属性必须是一个字符串值，其中包含重定向 URL 加上一个占位符查询字符串，该字符串将使用在 config JSON vars 属性中定义的值或作为数据属性在锚点本身中定义的值进行转换。

<amp-link-rewriter layout="nodisplay">
  <script type="application/json">
    {
      "output": "https://visit.foo.net?pid=110&cid=${customerId}`",
      "vars": {
        "customerId": "12345"
      }
    }
  </script>
</amp-link-rewriter>

我们还可以在锚点数据属性中定义数据值，如下例所示

<a
  href="https://www.amazon.de/s?i=computers&rh=n%3A340843031&ref=sn_gfs_co_computervs_AM_5"
  data-vars-event-id="231"
></a>

配置可能类似于

{
  "output": "https://visit.foo.net?eid=${eventId}&cid=${customerId}"
}

重写的最终 URL 将是

`https://visit.foo.net?eid=231&cid=12345`

除了在 JSON 配置的 vars 属性中或作为数据属性定义的变量之外，还有其他预定义的 vars，它们是 AMP URL MACRO 加上锚点属性 id 和 href，这些属性可用于替换输出模式中的值。可用的 AMP URL MACRO 是 AMP_GEO、DOCUMENT_REFERRER 和 SOURCE_URL。下表显示了已定义数据和占位符之间的关系。

值	来源	示例	占位符
国家/地区	地理位置	`美国`	`AMP_GEO(ISOCountry)`
data-vars-*	锚点	`<a href="..." data-vars-merchant-id="123" />`	`${merchantId}`
href	锚点	`<a href="https://retailer.com" />`	`${href}`
id	锚点	`<a href="..." id="link" />`	`${id}`
位置	页面	`https://www.partnerweb.com/`	`SOURCE_URL`
随机	页面	`Math.random().toString(32).substr(2)`	`${random}`
引荐来源	页面	`https://google.de/`	`DOCUMENT_REFERRER`
rel	锚点	`<a href="..." rel="pass" />`	`${rel}`
rev	锚点	`<a href="..." rev="author" />`	`${rev}`
vars.*	配置	`{ "vars": { "publisherId": "123" } }`	`${publisherId}`

section（可选）

section 属性定义了一个 CSS 选择器表达式数组，用于筛选应执行 URL 重写的区域。

{
  "output": "https://visit.foo.net?pid=110&url=${href}&cid=${customerId}",
  "section": ["#product-listing-1", "#product-listing-2"]
}

在上一个示例中，将考虑具有与 product-listing-1 和 product-listing-2 相等的属性 ID 的 HTML 部分，以进行 URL 重写。

attribute（可选）

attribute 属性定义了一组规则，用于匹配从筛选部分检索到的锚点元素。这些规则基于与 HTML 元素属性（如 id、href、class 或 rel）关联的正则表达式构建。

{
  "section": ["#product-listing-1"],
  "attribute": {
    "href": "((?!(https://skip.com)).)*",
    "class": "comments"
  }
}

具有 ID product-listing-1 的 HTML 区域中的锚点必须匹配为属性 href 和 class 定义的正则表达式。正则表达式将用 ^ 和 \$ 包裹，以进行完全匹配。

在此示例中，这意味着将排除所有带有 youtube.com 和 mobile.vodafone.de 的锚点。此外，包含的锚点需要具有值 comments 的 class 属性。

scopeDocument（可选）

默认情况下，如果页面没有任何符合配置中指定的 attribute 和 section 范围的链接，则所有锚点都将被重写。

要更改此行为，您需要将 scopeDocument 设置为 false。

验证

请参阅 AMP 验证器规范中的 amp-link-rewriter 规则。

需要更多帮助吗？

您已经阅读过本文档很多次，但它并没有真正涵盖您所有的问题？也许其他人也有同感：在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您参与和贡献！我们希望您将成为我们开源社区的持续参与者，但我们也欢迎针对您特别热衷的问题进行一次性贡献。

转到 GitHub