AMP

amp-link-rewriter

DescriptionRun link-rewriter inside your AMP page
Required Script<script async custom-element="amp-link-rewriter" src="https://cdn.ampproject.org/v0/amp-link-rewriter-0.1.js`></script>
Supported Layoutsnodisplay

Overview

amp-link-rewriter allows publishers to rewrite URL based on configurable pattern.

Getting started

Add the required script Inside the <head>...</head> section of your AMP page, insert this code before the line <script async src="https://cdn.ampproject.org/v0.js"></script>

Code:

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

Add the amp-link-rewriter extension Inside the <body>...</body> section of your AMP page, insert code as shown below the example (it has to be customized for every vendor use case):

Code:

    <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>

The final code should look like:

<!doctype html>
<html >
<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 configuration

output (required)

The "output" property has to be a string value with the redirection url plus a query string of placeholders that will be shifted with values defined in the config JSON 'vars' property, or in the anchor itself as a data attribute.

Example:

    <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>

We can also define data values in the anchor data attribute as the following example:

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

The config could be something like:

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

    }

The resulting, rewritten URL would be:

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

Apart from vars defined in the vars property of the JSON configuration, or as a data attribute, there are other pre-defined vars which are AMP URL MACROs plus anchor attributes id and href that could be used for replacing values in the output pattern. The AMP URL MACROs available are DOCUMENT_REFERRER and SOURCE_URL. The following table shows the relationship between defined data and placeholders.

valuesourceexampleplaceholder
data-vars-*anchor<a href="..." data-vars-merchant-id="123" />${merchantId}
hrefanchor<a href="https://retailer.com" />${href}
idanchor<a href="..." id="link" />${id}
locationpagehttps://www.partnerweb.com/SOURCE_URL
randompageMath.random().toString(32).substr(2)${random}
referrerpagehttps://google.de/DOCUMENT_REFERRER
relanchor<a href="..." rel="pass" />${rel}
revanchor<a href="..." rev="author" />${rev}
vars.*config{ "vars": { "publisherId": "123" } }${publisherId}
section (optional)

The "section" property defines an array of css selector expressions that filter areas where the url rewriting should operate.

Example:

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

In the previous example, the html sections defined with attribute ID equal to "product-listing-1" and "product-listing-2" will be considered for url rewriting.

attribute (optional)

The "attribute" property defines a list of rules to match the anchor elements retrieved from the filtered sections. These rules are built from regular expressions associated with html element attributes as "id", "href", "class" or "rel".

Example:

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

The anchors within the html area with id 'product-listing-1' will have to match the regex expression defined for the attribute href and class. The regex expression will be wrapped with ^ and $ for a full match. In this example, it means that all the anchors with youtube.com and 'mobile.vodafone.de' will be excluded. Also, the included anchors need to have a class attribute with the value 'comments'

Validation

See amp-link-rewriter rules in the AMP validator specification.

도움이 더 필요한가요?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub