Adaptive Card Action.OpenURL Tracking

Question

Adaptive Card 1.2 / 1.3

Issue

This is related to the Action.OpenURL button which we have in Adaptive Cards. When you display an Adaptive Card to a user with some links on it (Action.OpenURL), it simply open that URL in a new tab. Bot doesn't any idea whether the link was clicked or not, this makes the tracking of the event difficult to handle specially in case of when we wants to log which link was clicked for a particular utterance.

Can anyone please help us, what is the better way to handle this.

Answer 1

I believe there was something that changed in Adaptive Cards that no longer allows you to do something like this. But here is something I have discovered, but no idea if it actually works.

<script type="text/babel" data-presets="es2015,react,stage-3">
  (async function () {
    const { ReactWebChat } = window.WebChat;
    const cardActionMiddleware = () => next => async ( { cardAction } ) => {
      if (cardAction?.type === 'openUrl') {
        const urlButtonClickEvent = new Event('urlButtonClick')
        urlButtonClickEvent.data = cardAction.value;
        window.dispatchEvent(urlButtonClickEvent);
      }
      return next( { cardAction } );
    }
    const res = await fetch('http://localhost:3500/directline/token', { method: 'POST' });
    const { token } = await res.json();
    window.ReactDOM.render(
      <ReactWebChat
        directLine={ window.WebChat.createDirectLine({ token }) }
        cardActionMiddleware={cardActionMiddleware}
      />,
      document.getElementById('webchat')
    );
    document.querySelector('#webchat > *').focus();
    window.addEventListener( 'urlButtonClick', ( { data } ) => {
      store.dispatch({
        type: 'WEB_CHAT/SEND_EVENT',
        payload: {
          name: 'URL_BUTTON_CLICK',
          value: data
        }
      })
    } );
  })().catch(err => console.error(err));
</script>