Skip to main content

AMP Event Collection

Overview​

AMP is an open source initiative to offer you event collection by optimizing web pages for mobile devices. Bisko can be integrated on your AMP pages to give you event collection.

This will involve importing the amp-analytics script into your page, for example:

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

Pages optimized with AMP HTML can collect events in Bisko by adding the appropriate amp-analytics tag to your pages:

<body>
    ...
    <amp-analytics type="bisko" id="bisko">
    <script type="application/json">
    {
        "transport": {
            "beacon": true,
            "xhrpost": false
        },
        "requests": {
            "pageview": "https://bisko.gjirafa.tech/api/v1/amp?Type=${onViewType}&PropertyId=${propertyId}&ScreenHeight=${screenHeight}&ScreenWidth=${screenWidth}&Language=${browserLanguage}&PageDomain=${canonicalHostname}&Url=${canonicalUrl}&PageCleanUrl=${canonicalHost}&Title=${title}&Referrer=${documentReferrer}&PageViewGuid=${pageViewId64}&ClientDateTime=${timestamp}&DateTimeUtcOffset=${timezone}"
        },
        "triggers": {
            "trackPageview": {
                "on": "visible",
                "request": "pageview"
            }
        },
        "vars": {
            "propertyId": 12710,  //Your Bisko Property Id
            "onViewType": "pageview"
        },
        "extraUrlParams": {
            "Content.id": "1234",
            "Content.name": "Samsung releases new Galaxy Note version",
            "Content.type": "article"
        }
    }
    </script>
    </amp-analytics>
</body>

Standard variables​

Type of the event and propertyId are part of the request and must be provided in the "vars" section of the tag. Use "onViewType": "pageview" to define pageview event and "onClickType": "linkclick" to define linkclick events: 

    {
        "vars": {
            "propertyId": {BISKO_PROPERTY_ID}, 
            "onViewType": "pageview",   
            "onClickType": "linkclick"
        }
    }

The rest are optional.

propertyId

You must define the ID of the Bisko property to which you want to send data.

{
    "vars": {
        "propertyId": {BISKO_PROPERTY_ID}
    }
}

onViewType

In order to define a pageview event, you must define that onViewType is pageview:

{
    "vars": {
        "propertyId": 12710,
        "onViewType": "pageview"
    }
}

onClickType

In order to define a linkclick event, you must define that onClickType is linkclick:

{
    "vars": {
        "propertyId": 12710,
        "onViewType": "pageview",
        "onClickType": "linkclick"
    }
}

selector variables

You can add additional variables which define elements matched by the specified CSS selector(i.e. id, class, html tag). These vars will be used by triggers, specifically by selector, in order to select an element:

<body>
    ...
    <a href="/" id = "linkId">
    <a href="/" class = "linkClass">
        {
            "triggers": {
                "trackClick": {
                    "on": "click",
                    "selector": "${id1}, ${id2}",
                    "request": "linkclick"
                }
            },
            "vars": {
                "propertyId": 12710,
                "onClickType": "linkclick",
                "id1": "#linkId",
                "id2": ".linkClass"
            }
        }
</body>

Note:

When defining the value of a variable, don't forget to use # to access an element through its id, or . to access an element through its class.

Extra url parameters​

The extraUrlParams object is optional and can be used to pass in arbitrary metadata describing the page content. These properties are included in events sent into Bisko, so you should ensure that the properties you send in match up with your Bisko event schemas.

PROPERTYDATATYPEDESCRIPTION
IdSTRINGThe identifier of the content.
NameSTRINGThe name of the content.
TypeSTRINGType of content, i.e. "video", "news article".
DescriptionSTRINGDescription of the content.
CategoryARRAYA string array of the content categories.
ImageUrlSTRINGThe url of the main image of the content.
ValueSTRINGValue of content, i.e. for ecommerce "100 $".
KeywordsARRAYA string array of keywords related to the content.
AuthorSTRINGThe author of the content.
QuantityINTEGERQuantity of the content.

Refer to the example below:

    {
        "transport": {
            "beacon": true,
            "xhrpost": false
        },
        "requests": {
            "pageview": "https://bisko.gjirafa.tech/api/v1/amp?Type=${onViewType}&PropertyId=${propertyId}&ScreenHeight=${screenHeight}&ScreenWidth=${screenWidth}&Language=${browserLanguage}&PageDomain=${canonicalHostname}&Url=${canonicalUrl}&PageCleanUrl=${canonicalHost}&Title=${title}&Referrer=${documentReferrer}&PageViewGuid=${pageViewId64}&ClientDateTime=${timestamp}&DateTimeUtcOffset=${timezone}"
        },
        "triggers": {
            "trackPageview": {
                "on": "visible",
                "request": "pageview"
            }
        },
        "vars": {
            "propertyId": 12710,
            "onViewType": "pageview"
        },
        "extraUrlParams": {
            "Content.id": "1234",
            "Content.name": "Samsung releases new Galaxy Note version",
            "Content.type": "article",
            "Content.description": "Samsung has released the newset Galaxy Note version for the users. It contains major changes and new features.",
            "Content.author": "Nick Smith",
            "Content.category": [["Technology", "Smartphone"]],
            "Content.value": "Amazing news! The new Galaxy Note looks perfect!",
            "Content.quantity": 2,
            "Content.imageUrl": "https://magazine.com/apple-iphone-release"
        }
    }

Note:

As mentioned above, these are optional and are the predefined properties that can be collected for the content where the event happened.

Custom property​

Custom properties for the content are supported. All custom properties must be of type string.

"extraUrlParams": {
    "Content.id": "1234",
    "Content.name": "Samsung releases new Galaxy Note version",
    "Content.type": "article",
    "Content.description": "Samsung has released the newset Galaxy Note version for the users. It contains major changes and new features.",
    "Content.author": "Nick Smith",
    "Content.category": [["Technology", "Smartphone"]],
    "Content.value": "Amazing news! The new Galaxy Note looks perfect!",
    "Content.quantity": 2,
    "Content.imageUrl": "https://magazine.com/apple-iphone-release",
    "Content.Words": "452"
}

Collecting events​

The following trigger request values are supported for Bisko configuration:

  • pageView - Collects every page a user visits.

  • linkClick - Collects every link a user clicks.

Page view​

The example below collects page views. Every time a page is visible, the trigger event fires, and sends the pageview data to a defined URL in the request.

<amp-analytics type="bisko" id="bisko">
    <script type="application/json">
    {
        "transport": {
            "beacon": true,
            "xhrpost": false
        },
        "requests": {
            "pageview": "https://bisko.gjirafa.tech/api/v1/amp?Type=${onViewType}&PropertyId=${propertyId}&ScreenHeight=${screenHeight}&ScreenWidth=${screenWidth}&Language=${browserLanguage}&PageDomain=${canonicalHostname}&Url=${canonicalUrl}&PageCleanUrl=${canonicalHost}&Title=${title}&Referrer=${documentReferrer}&PageViewGuid=${pageViewId64}&ClientDateTime=${timestamp}&DateTimeUtcOffset=${timezone}"
        },
        "triggers": {
            "trackPageview": {
                "on": "visible",
                "request": "pageview"
            }
        },
        "vars": {
            "propertyId": 12710,
            "onViewType": "pageview"
        }
    }
    </script>
</amp-analytics>

The example below collects link clicks. Every time a link is clicked, the trigger event fires, and sends the linkclick data to a defined URL in the request.

<body>
    ...
    <a href="/" id = "linkId">
        <amp-analytics type="bisko" id="bisko">
            <script type="application/json">
                {
                    "transport": {
                        "beacon": true,
                        "xhrpost": false
                    },
                    "requests": {
                        "linkclick": "https://bisko.gjirafa.tech/api/v1/amp?Type=${onClickType}&PropertyId=${propertyId}&ScreenHeight=${screenHeight}&ScreenWidth=${screenWidth}&Language=${browserLanguage}&PageDomain=${canonicalHostname}&Url=${canonicalUrl}&PageCleanUrl=${canonicalHost}&Title=${title}&Referrer=${documentReferrer}&PageViewGuid=${pageViewId64}&ClientDateTime=${timestamp}&DateTimeUtcOffset=${timezone}"
                    },
                    "triggers": {
                        "trackClick": {  // Trigger names can be any string. trackClick is not a required name
                            "on": "visible",
                            "selector": "${id1}", // Define which elements will cause this request to fire. 
                            "request": "linkclick"
                        }
                    },
                    "vars": {
                        "propertyId": 12710,
                        "onClickType": "linkclick",
                        "id1": "#linkId"
                    }
                }
            </script>
        </amp-analytics>

Notes:

Use selector to control which elements will cause this request to fire. The trigger will fire for all elements matched by the specified selector. The selector can either be a single CSS query selector or an array of selectors. The trigger will fire for all elements matched by the specified selector.

Request​

For each collecting event you should define the URL that specifies what request should be sent in response to a particular event (e.g. pageview, linkclick, etc.). Use the transport to configure how we will send a request. In our case use the default properties:

{
    "transport": {
        "beacon": true,
        "xhrpost": false
    },
    "requests": {
        "pageview": "https://bisko.gjirafa.tech/api/v1/amp?Type=${onViewType}&PropertyId=${propertyId}&ScreenHeight=${screenHeight}&ScreenWidth=${screenWidth}&Language=${browserLanguage}&PageDomain=${canonicalHostname}&Url=${canonicalUrl}&PageCleanUrl=${canonicalHost}&Title=${title}&Referrer=${documentReferrer}&PageViewGuid=${pageViewId64}&ClientDateTime=${timestamp}&DateTimeUtcOffset=${timezone}",
        "linkclick": "https://bisko.gjirafa.tech/api/v1/amp?Type=${onClickType}&PropertyId=${propertyId}&ScreenHeight=${screenHeight}&ScreenWidth=${screenWidth}&Language=${browserLanguage}&PageDomain=${canonicalHostname}&Url=${canonicalUrl}&PageCleanUrl=${canonicalHost}&Title=${title}&Referrer=${documentReferrer}&PageViewGuid=${pageViewId64}&ClientDateTime=${timestamp}&DateTimeUtcOffset=${timezone}"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        },
        "trackClick": {
            "on": "click",
            "selector": "${id1}",
            "request": "linkclick"
        }
    },
    "vars": {
        "propertyId": 12710,
        "onViewType": "pageview",
        "onClickType": "linkclick",
        "id1": "#linkId"
    },
    "extraUrlParams": {
        "Content.id": "1234",
        "Content.name": "Samsung releases new Galaxy Note version",
        "Content.type": "article",
        "Content.description": "Samsung has released the newset Galaxy Note version for the users. It contains major changes and new features.",
        "Content.author": "Nick Smith",
        "Content.category": [["Technology", "Smartphone"]],
        "Content.value": "Amazing news! The new Galaxy Note looks perfect!",
        "Content.quantity": 2,
        "Content.imageUrl": "https://magazine.com/apple-iphone-release",
        "Content.test": "test"
    }
}

IMPORTANT

It is important to know that when you specify the requests in the vendor-requests.json you should replace PROPERTY_ID with your propertyId.

"pageview": "https://bisko.gjirafa.tech/api/v1/amp?Type=pageview&PropertyId=PROPERTY_ID&ScreenHeight=_screen_height_ ...