Amphtml: amp-analytics - selector error when "on" = "visible"

Created on 13 Oct 2017 · 6Comments · Source: ampproject/amphtml

Hi:

I try to use amp-analytics to collect user behavior. To calculate CTR I need to collect particular element "visible" times. So I use selector to point the DOM element. But browser console will display error which about Element " .header__search " is required to be an AMP element.

Here comes my code:

<body>
<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
            "vars": {
                "account": "UA-74300583-2",
                "documentGroup": "itemPage",
                "level1Id": "25464",
                "level2Id": "2092097693",
                "level3Id": "2092097697",
                "level4Id": "none",
                "level5Id": "none",
                "level6Id": "none",
                "merchandiseId": "100132105311"
            },
            "extraUrlParams": {
                "cg1": "${documentGroup}",
                "cd1": "${level1Id}",
                "cd2": "${level2Id}",
                "cd3": "${level3Id}",
                "cd4": "${level4Id}",
                "cd5": "${level5Id}",
                "cd6": "${level6Id}",
                "cd7": "${merchandiseId}"
            },
            "triggers": {
                "pageview": {
                    "on": "visible",
                    "request": "pageview"
                },
                "viewItemSearch": {
                    "on": "visible",
                    "request": "event",
                    "selector": ".header__search",
                    "vars": {
                        "eventCategory": "${documentGroup}",
                        "eventAction": "moduleView",
                        "eventLabel": "itemSearch"
                    }
                }
            }
        }
    </script>
</amp-analytics>

<div class="header__search">tracked module</div>

</body>

I wonder is it an issue or only AMP element could bind visible event.

Have a nice day.

Paul

Source

meistudioli

Most helpful comment

Thank you @felixuko for the feedback. It is correctly today that amp-analytics doesn't support visibility tracking of non-AMP elements.

amp-pixel doesn't provide visibility tracking, it's a light weighted builtin component that simply send out a ping.

I think there's a real necessity here for big companies devolopping AMP websites. We need to be able to track when some elements are visible, and they're not always AMP tags.

I completely understand. Instead it has been decided to remove the restriction. #20607
Before that's implemented, you're welcome to wrap your non-AMP element with <amp-layout>. That provides a temporary solution to track visibility of an non-AMP element. Please let me know if there's any question. Thank you

zhouyx on 7 Feb 2019

👍2

All 6 comments

@meistudioli Currently AMP analytics only support tracking visibility of AMP elements not any DOM element.
Is it possible for you to use an AMP element instead of <div>. What is your use case here?

zhouyx on 17 Oct 2017

Hi, @zhouyx :

That's ok. I still can use other way to collect moduleView data. Just make sure visible event support for AMP element only or not.

Is it possible for correct the document to let developers can aware this rule ?
amp-analytics doc

Thanks for helping. I will close this issue by myself.

Have a nice day.

Paul

meistudioli on 18 Oct 2017

great suggestion! Thanks @meistudioli

We did document the rule that visible selector only applies to AMP element. It might worth pointing out that visible trigger doesn't support random DOM element.

The element visibility trigger can be configured for any AMP element or a document root using selector.

Notice that selector can be used to only specify a single element, not a collection. The element can be either an AMP extended element or a document root.

zhouyx on 18 Oct 2017

👍1

So it's OK if I want to track when an <amp-img> is visible, but I can't do the same for a <div> or an <a> ?

I've tried doing the trick with an <amp-pixel> but it doesn't work. It simply doesnt trigger the event when te <amp-pixel>, which is placed just above the real element I want to track, is visible.

I think there's a real necessity here for big companies devolopping AMP websites. We need to be able to track when some elements are visible, and they're not always AMP tags.

Cheers,

Félix.

felixuko on 7 Feb 2019

Thank you @felixuko for the feedback. It is correctly today that amp-analytics doesn't support visibility tracking of non-AMP elements.

amp-pixel doesn't provide visibility tracking, it's a light weighted builtin component that simply send out a ping.

I think there's a real necessity here for big companies devolopping AMP websites. We need to be able to track when some elements are visible, and they're not always AMP tags.

zhouyx on 7 Feb 2019

👍2

Thank you very much @zhouyx for your fast answer and the <amp-layout> tip. I will implement it right now.
I just read #20607 issue. I think it's great news!

felixuko on 8 Feb 2019

Was this page helpful?

0 / 5 - 0 ratings