Search code examples
amp-htmlamp-analyticssnowplow

AMP Analytics Source with Slash in URL


I'm using the amp-analytics component in an AMP page to track page views. My request source (the endpoint to send data to) includes a forward slash like so:

request.source.com/endpoint

AMP doesn't like this and gives the following error:

amp-analytics request source must start with "https://" or "//" or be relative and served from either https or from localhost. Invalid value:

https://request.source.com%2Fendpoint/i?url=http%3A%2F%2Fcontent.url.com%3A8079%2Fregular-html-version.html&page=Sample%20document&res=2560x1440&stm=1538590011734&tz=240&aid=25&p=web&tv=amp-0.2&cd=24&cs=UTF-8&duid=amp-CGG5vSIemmau7QUKCzi1yw&lang=en-us&refr=&stm=240&vp=452x1270&e=pv

Note that it URL-encoded the forward slash to %2F. I also tried encoding it in the script. This made no difference.

Also note that when I remove the forward slash from the request source (i.e. just use request.source.com), then it works fine. (But it's a product requirement that the endpoint contains that forward slash).

Any thoughts on how to achieve this? Here is my AMP code:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="snowplow" id="snowplow1">
    <script type="application/json">
        {
            "vars": {
                "collectorHost": "request.source.com/endpoint",
                "appId": "25"
            },
            "triggers": {
                "trackPageview": {
                    "on": "visible",
                    "request": "pageView"
                }
            }
        }
    </script>
</amp-analytics>

Solution

  • The reason you're seeing this is that variables are url encoded.

    You'll need to create your custom one instead of using the default snowplow implementation in amp-analytics. Copy this config: https://github.com/ampproject/amphtml/blob/0a84124122b516d33e8f815c4d7205ea92f0865b/extensions/amp-analytics/0.1/vendors/snowplow.js

    Then use this documentation to add in your "endpoint" in the configuration object: https://github.com/ampproject/amphtml/blob/0a84124122b516d33e8f815c4d7205ea92f0865b/extensions/amp-analytics/amp-analytics.md#specifying-configuration-data

    You'll end up with something like this in your json config:

    ...
    'basePrefix': 'https://${collectorHost}/endpoint/i?url=${canonicalUrl}&page=${title}&' +
    ...