search

yuhui / launchext-youtube-playback

Extension for Adobe Experience Platform Data Collection Tags (Adobe Launch) to track YouTube video playback
GNU General Public License v3.0
2 stars 2 forks source link

Youtube playback extension #35

Open kalaivaniL opened 1 week ago

kalaivaniL commented 1 week ago

Describe the bug I am not able to track the youtube using the extension it doesnt load the youtube on the webpage when the executing the rules

To Reproduce Steps to reproduce the behavior: In my website page, i have added youtube along with the querystring params enablejsapi=1&rel=0 when i follow the tutorial and publish the Youtube on webpage is showing error and it doesnt load why this is happening

Expected behavior Need the youtube tracking to work well

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

yuhui commented 1 week ago

@kalaivaniL Can you share the website where you are experiencing this problem? Please ensure that Launch is loaded in this website and that I am able to replicate your problem.

kalaivaniL commented 1 week ago

I am experiencing the problem in https://publish-p126202-e1235109.adobeaemcloud.com/us.html?cid=567 and the youtube doesnt load when i try it

yuhui commented 1 week ago

@kalaivaniL Thanks for sharing the website link.

In my test, I found that I could watch the YouTube video properly.

  1. Open the web page https://publish-p126202-e1235109.adobeaemcloud.com/us.html?cid=567
  2. Take note that the YouTube video is the 2nd item in the main carousel.
  3. When the carousel shows the YouTube video, play the video.

Result: the YouTube video starts playing as expected.

Furthermore, I found that the carousel continues rotating through its 3 items. But when it returned to the YouTube video, I found that the video continued playing as normal.

So as far as I can tell, the YouTube video can play properly in the carousel.

I checked the Launch script that is loaded in that page https://assets.adobedtm.com/d4249fa0c1c0/f526c37a14dd/launch-d087a500d721-development.min.js , but found that my YouTube extension is not being loaded in it. So I cannot validate the issue that you're facing. Can you please ensure that your Launch library contains my YouTube Playback extension, together with any rules and data elements that you've created to track the YouTube playback?

kalaivaniL commented 4 days ago

Yes Sure i had it in my launch, as there was client demo to be shown i have removed it, please tell me a time to add it , because video will show playback error with the blank screen i couldnt have it longer in my launch code.

yuhui commented 4 days ago

@kalaivaniL please add my YouTube extension to your Launch script on Tuesday between 2-3pm UTC or Wednesday 1-3pm UTC. Thanks.

kalaivaniL commented 4 days ago

Thanks , i will add and ping you on above time

kalaivaniL commented 3 days ago

@yuhui , I will enable all code and publish in dev environment by 2-3pm UTC.Please let me know once your available.

kalaivaniL commented 3 days ago

@yuhui Youtube playextension is on dev environment, https://publish-p126202-e1235109.adobeaemcloud.com/us.html, please help me on this

yuhui commented 3 days ago

@kalaivaniL thanks for sharing the site. I've started to investigate the problem. I've also saved a copy of your Launch script, so that I can load it when troubleshooting.

kalaivaniL commented 3 days ago

Thanks @yuhui and there is another complication in our website , there is empty iframe and when the page below video our client when user clicks only on click they were able to append the src along with other enablejsapi is included.

kalaivaniL commented 3 days ago

I have reverted back the code and hope you can the investigate further

kalaivaniL commented 3 days ago

we also have testimonial video of iframe.

yuhui commented 1 hour ago

@kalaivaniL this is what I've found so far: Your website's HTML is like this:

<div ... id="youtube-carousel" class="cmp-embed" data-iframe-id="youtube-carousel">
   <div class="cmp-embed__youtube" style="padding-bottom: 56.25%">
   <iframe class="cmp-embed__youtube-iframe" title="youtube video" ... ></iframe>
   </div>
 </div>

When the browser renders this part, it runs a script in your site that takes the <div>'s data-iframe-id="youtube-carousel" and uses that as the ID of the <iframe>. That results in 2 DOM elements having the same ID:

<div ... id="youtube-carousel" class="cmp-embed" data-iframe-id="youtube-carousel">
   <div class="cmp-embed__youtube" style="padding-bottom: 56.25%">
   <iframe class="cmp-embed__youtube-iframe" title="youtube video" ... id="youtube-carousel"></iframe>
   </div>
 </div>

But that goes against HTML syntax, in that every DOM element must have its own ID value.

So, since the web page now has 2 DOM elements, <div> and <iframe>, with the same ID "youtube-carousel", that causes a conflict.

In my test, when I changed the <div> code so that the data-frame-id is another value, e.g. "youtube-carousel-embed", then everything ran properly as expected and I could see my video playback being tracked. So please try that: ask your developers to use a different value in the data-frame-id attribute:

<div ... id="youtube-carousel" class="cmp-embed" data-iframe-id="youtube-carousel-embed">
...
</div>