This pull request introduces 1 alert when merging 6bf51b3 into 6efb0c0 - view on LGTM.com

new alerts:

• 1 for Unreachable statement

Notes from our 1-1:

• Add a unit test for 1-to-many based on same class on multiple video elements
• Add flag for no restriction on data-vars*, add unit tests to test-analytics-root.js

Wooohoo!!

Thank everyone!

I just wanted to check when these changes are expected to go live approximately?

I was trying to refer to this document for understanding how this works: https://amp.dev/documentation/guides-and-tutorials/learn/spec/release-schedule/ but still not getting a clear picture.

Looking forward to be able to use a single CSS selector to target all amp-youtube elements on a page.

They will go live in aprox 2 weeks. Yes, @kalemuw can you provide an example of what that would look like?

Thank everyone!

I just wanted to check when these changes are expected to go live approximately?

I was trying to refer to this document for understanding how this works: https://amp.dev/documentation/guides-and-tutorials/learn/spec/release-schedule/ but still not getting a clear picture.

Looking forward to be able to use a single CSS selector to target all amp-youtube elements on a page.

Hey @prathamesh-gharat. Here's a sample config that tracks multiple video elements at once.

"myVideoPlay": {
            "on": "video-play",
            "request": "event",
            "selector": ["#my-video", "#my-video-2"],
            "vars": {
              "eventType": "video-play"
            },
            "extraUrlParams": {
              "videoId": "${id}"
            }
  }

Thanks @kalemuw.

I have a question.
Can it just be a single CSS selector which selects multiple elements?
For example

"myVideoPlay": {
            "on": "video-play",
            "request": "event",
            "selector": "amp-youtube",
            "vars": {
              "eventType": "video-play"
            },
            "extraUrlParams": {
              "videoId": "${id}"
            }
  }```

Thanks @kalemuw.

I have a question.
Can it just be a single CSS selector which selects multiple elements?
For example

"myVideoPlay": {
            "on": "video-play",
            "request": "event",
            "selector": "amp-youtube",
            "vars": {
              "eventType": "video-play"
            },
            "extraUrlParams": {
              "videoId": "${id}"
            }
  }```

@prathamesh-gharat
If the CSS selector is a just a class name, only the first instance/element with that class name will be retrieved.
However, if you want all of the elements with that class name, simply enclose the classname in square brackets.
Additionally, you can make use of id names - as simple strings or arrays of strings.
For example:

"myVideoPlay" : {
   ...
   selector: ".youTubeVideos"   // retrieves only the first elements with class name "youTubeVideos"
   ....
}

"myVideoPlay" : {
   ...
   selector: [".youTubeVideos"] // retrieves all elements with class name "youTubeVideos"
   ....
}

"myVideoPlay" : {
   ...
   selector: ["#myVideo", "#myVideo-2"] // retrieves elements with ids "myVideo" and "myVideo-2" only 
   ....
}

@kalemuw, is it possible to access the data-videoid attribute value of an <amp-youtube> tag in analytics configuration?

Need to pass the information to GA based on the video being played.

I already tried finding on following two links but couldn't anything that worked.
https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md
https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md

Update: Going to copy data-videoid attribute as data-vars-videoid in the code for the time being.