AMP Analytics Source with Slash in URL

503 Views Asked by At

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

There are 1 best solutions below

0
XTOTHEL On BEST ANSWER

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}&' +
...