AMP

重要提示:此文档不适用于您当前选择的格式 ads

amp-link-rewriter

描述

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

 

必需的脚本

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

支持的布局

用法

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 页面的 <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 以及占位符的查询字符串,这些占位符将使用配置 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 宏和锚属性 idhref,可用于替换输出模式中的值。可用的 AMP URL 宏有 AMP_GEODOCUMENT_REFERRERSOURCE_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 属性定义了一个 CSS 选择器表达式数组,用于筛选应该执行 URL 重写的区域。

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

在前面的示例中,使用 ID 等于 product-listing-1product-listing-2 属性定义的 HTML 部分将被视为用于 URL 重写。

属性 (可选)

attribute 属性定义了一系列规则,以匹配从筛选的部分检索的锚元素。这些规则由与 HTML 元素属性(如 idhrefclassrel)关联的正则表达式构建。

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

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

在此示例中,这意味着所有带有 youtube.commobile.vodafone.de 的锚将被排除。此外,包含的锚需要具有值为 comments 的 class 属性。

作用域文档 (可选)

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

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

验证

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

需要更多帮助?

您已经阅读了本文档十几次,但它并没有真正涵盖您的所有问题?也许其他人也有同样的感受:在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您的参与和贡献!我们希望您能成为我们开源社区的长期参与者,但我们也欢迎您对您特别感兴趣的问题进行一次性贡献。

转到 GitHub