Youtube tracking using Data Collection

[igarciacufree]

Hello community,

I am trying to track youtube videos using the extension but is not working -

I am following the documentation from:

https://experienceleague.adobe.com/docs/experience-platform/tags/extensions/client/youtube/overview....

The videos in the site are embed using <iframe> 

and I checked the documentation: https://developers.google.com/youtube/player_parameters#Manual_IFrame_Embeds

and seems to be correct.

I just need to track when a video starts. 

The url of the video contains the parameters: enablejsapi = 1 and the id:

id="yt-1920397041" src="https://www.youtube.com/embed/<videoUrl>?autoplay=0&amp;start=0&amp;rel=0&amp;modestbranding=1&amp;e..."

I am currently facing two issues:

1- a CORS error:

"Access to XMLHttpRequest  has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

"

I understand that it can be because it doesn't contain the: origin parameter - Do you think it can be that? 

2- in the rule I have created for testing, in the action I just write in the console when the rule fired, but nothing is happening - 

Is there someone who is tracking videos using this extension? or using a custom code? Or the only solution is to create the  mix between Adobe and GTM ?

https://experienceleaguecommunities.adobe.com/t5/experience-league-showcase-2022/creating-a-frankens...

Thank you all in advance,

Kind regards,

Ivan.-

[Jennifer_Dungan]

I'm the one who created / is using the Frankenstein solution  

To this day, this is the only solution I have managed to get working consistently...  the other solutions for me failed about 70% of the time...  so while I got some data... it was so sporadic that I couldn't trust it....

And it's wasn't a CORS issue for me... it was just the play or pause listeners just failed to detect the player states changes.... 

Without seeing your implementation, it is hard to determine if the CORS policy is causing the primary issue for you.

I know that some people use this plugin over Adobe's (https://exchange.adobe.com/apps/ec/104160) this was written by another Community Advisor, but I have also seen a lot of posts about inconsistencies with tracking (I never got that solution working either, and I didn't see if other people got sorted out)

[igarciacufree]

Hi Jennifer, 

Thank you for your response What I was trying to achieve is like a custom code or the Adobe extension which seems that is not working - I was trying to follow this documentation also: 

https://annealytics.com/2020/05/17/tracking-youtube-videos-in-iframes-with-adobe-launch-a-simpler-ap...

But is still not working for me - when I add the code in the Adobe Analytics extension - 

Thank you for your help  

[yuhuisg]

Can you share the page URL where you have this YouTube video problem?

[igarciacufree]

Hi Yuhuisg, 

Unfortunately, I cannot share the URL because the test site has user and password.

But I can mention that I found the issue -

The problem was that the site loads so slowly, that the video was in place after the library is loaded and the eventListener could never see the iframe -

The solution was to create a rule that after the page is loaded, has a delay before setting  the youtube eventListener - 

Kind regards  

[yuhuisg]

@igarciacufree , 

1. Yes, the missing "origin" parameter is the most likely cause. Although I would expect Adobe's extension to add that parameter to your YouTube embed URL if it's not already there.

2. Since there is the CORS error, then the YouTube IFrame API script is not being loaded, and so none of the playback tracking would work.

I am the developer of the YouTube Playback extension (the one that Jennifer had mentioned at https://exchange.adobe.com/apps/ec/104160). If you're keen to try that and run into issues, you can message me and I'll try to help you out.

[Jennifer_Dungan]

Right! If anyone can get that plugin working for you, it's @yuhuisg 

I honestly don't know if my issue had to do with our React implementation... 

[igarciacufree]

Hi,

As I mentioned in my previous comment, I think that the issue can come from a delay when the iFrame is loaded. 

So I think that is why the extension is not working for me - Do you have any workaround for this scenario? 

Kind regards,

Ivan.- 

[yuhuisg · Accepted solution]

From your comment above, you mentioned this:

---

@igarciacufree wrote:

The solution was to create a rule that after the page is loaded, has a delay before setting  the youtube eventListener - 

---

If you use my YouTube Playback extension, then at this Rule, you can run my extension's action, "Enable video playback tracking". This will enable your video to work with the YouTube IFrame API for playback tracking. My action basically does the same thing as the YouTube code.

[Amruthesh_AG]

Follow below steps to get the YouTube video title/ YouTube video name

1. Install YouTube Playback extension.

2. Create a data element select extension as YouTube Playback and data element type as Video Title

3.Create a rule EVENTS= Window loaded then ACTIONS= select extension as YouTube Playback, Action Type=Enable video playback tracking.

4. Create a rule EVENTS= based on your requirement EX: Video start, Video 25%, Video End etc then ACTIONS select extension as Adobe analytics, Action type as set variable, set a required Evars/Props select set as data element created in step-2.

Ex: Evars/Props 13 set as created video title data element

Give a thumps up if you like my solution.