Tracking xAPI statemente event on H5P

h5p.xapi.tracking.js

import React from 'react'
import PropTypes from 'prop-types'

const H5pContent = ({ iframeSrc }) => {
  const handleContentRef = dom => {
    if (dom) {
      dom.onload = () => {
        dom.contentWindow.H5P.externalDispatcher.on('xAPI', function(event) {
          console.log('INITIAL STATEMENT ON externalDispatcher')
          console.log(event.data.statement)
        })
      }
    }
  }


  return (
    <iframe
      title='h5p-embed'
      ref={handleContentRef}
      src={iframeSrc}
      frameBorder='0'
      allowFullScreen='allowfullscreen'
    />
  )
}

H5pContent.propTypes = {
  iframeSrc: PropTypes.string.isRequired,
}