[Analytics][Newsroom] Video milestones are not triggering for vidyard videos

[cylevaldez]

Priority: 2 - High

Steps to Reproduce: NOTE: This applies for all vidyard videos

1. Navigate to https://main--accenture-newsroom--hlxsites.hlx.live/news/2023/accenture-song-wins-dan-wieden-titanium-grand-prix-for-tuvalu-the-first-digital-nation
2. Scroll down to video and click play

Expected Result: Analytics video milestones are triggered

Actual Result: Analytics video milestones are not triggered

[ravkiran]

@cylevaldez could you please list the events required to be triggered, so that we can instrument the block to trigger the same.

[ravkiran]

<!-- The script tag should live in the head of your page if at all possible -->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>

<!-- Put this wherever you would like your player to appear -->
<img
class="vidyard-player-embed"
src="https://play.vidyard.com/"playerUUID".jpg"
data-uuid="playerUUID";
data-v="4"
data-type="inline"
/>

Not sure if the v4.js causes LHS to drop, but check it out.

[ravkiran]

https://knowledge.vidyard.com/hc/en-us/articles/360009870114-Trigger-Javascript-actions-at-video-milestones-with-progress-events#:~:text=The%20Vidyard%20Player%20API%20allows,data%20into%20third-party%20applications.

[ravkiran]

@cylevaldez as per our discussion in yesterday's call, I've made the changes to render the video using vidyard js in https://github.com/hlxsites/accenture-newsroom/blob/vidyard/blocks/video/video.js#L13-L23

You can see the changes in this url

I'm adding the script v4.js to the head first, then waiting until that script is downloaded. Then adding the img with all the properties as per above. But still, the video isn't showing. Can you please check with Miko, what's missing in this change.

[cylevaldez]

@ravkiran We can't access the url provided. I'm getting this issue

Is there a workaround for this?

Miko initially checked the code you provided, and it seems to be correct. It will be better to have the URL

[ravkiran]

@cylevaldez that's weird. Are you using this url https://vidyard--accenture-newsroom--hlxsites.hlx.page/drafts/ravi/accenture-interactive-expands-experience-led-transformation-services-in-southeast-asia-with-acquisition-award-winning-agency-entropia

Is it asking the login?

You need to login to Accenture sharepoint to access these links.

[cylevaldez]

@ravkiran Yes, I'm using that URL. It is also asking for a login. Not sure, but maybe I don't have access to that Accenture sharepoint. I'll ask for access

[cylevaldez]

@ravkiran I was able to open the URL now. Miko suggested to try to change the image tag to the following for the video to render:

From:

To:

[ravkiran]

@cylevaldez sorry, didn't pay much attention to the / in the uuid, fixed now

You can check in https://vidyard--accenture-newsroom--hlxsites.hlx.page/drafts/ravi/accenture-interactive-expands-experience-led-transformation-services-in-southeast-asia-with-acquisition-award-winning-agency-entropia But still the video isn't rendering. Can you please check?

[cylevaldez]

@ravkiran We suggest to try two things:

1. Can we try following the order of the attributes as mentioned in the vidyard document? (Class attribute will be first, then src, and so on) As we are not sure on how the Vidyard API script was coded on their end.

2. Can we also try to remove the async or set it to false for the Vidyard JS?

[ravkiran]

@cylevaldez Its very unlikely that any public API can read the ordering of attributes in the html, anyways, I've made the change requested but still not working. Please check https://vidyard--accenture-newsroom--hlxsites.hlx.page/drafts/ravi/accenture-interactive-expands-experience-led-transformation-services-in-southeast-asia-with-acquisition-award-winning-agency-entropia

If this is taking time in to & fro, we can meet in a call at 10/09 7 PM PST.

[cylevaldez]

@ravkiran Sure, we can have the call