Twitter 투고시의 event, callback에 대해 (JS)

어떤 고객으로부터 의뢰가 있고, 조사했을 때의 비망록입니다.
트위터 게시 시 게시 완료 후 〇〇이 하고 싶다
라는 것이있었습니다.

이 기사에서는 구현 공수가 걸리지 않는 상정으로, html과 Javascript만으로 해결을 시도했을 때의 조사 내용이 됩니다. (Twitter Javascript API 전용 이야기)
조사 과정을 싣고 나서 결과 쓰고 있으므로, 결과만 보고 싶은 분은 아래의 방견에 가 주세요.

현재 구현 및 분석

React 16.8.6
react-share 사용 (자세한 내용은 여기)
버튼 디자인은 원래입니다.
Twitter 화면 열 때 작은 창을 내고 있습니다.

의뢰 내용이 react-share로 실현될 수 있는지, 가볍게 조사하면 Twiiter의 쉐어 버튼에서는 투고 후의 callback은 구현되지 않았기 때문에, 결국 Twiiter의 document를 보러 가기로.

문서 확인

공식
일본어판

보면 그것 같은 내용이 쓰여있다.

tweet
このイベントは、ユーザーがツイートウェブインテントを使ってツイートを投稿した時(新規投稿かリプライ)に発生します。

埋め込み型ツイートへのリプライツイートや、埋め込み型タイムライン内に表示されるツイートを含みます。

twttr.events.bind(
  'tweet',
  function (event) {
    // Do something there
  }
);

이것 사용할 수 있을 것 같다, 라고 할까 이것이 아닌가.

자주 보는 기사에서 구현만 해 본다

htps : // 놀라운 l. 코m/쿠에 s치온 s/141755
htps : // 이 m/히로 glypH/이고 ms/23252479c다 93f88c227
이 기사를 읽고 참고로 React에 넣어 보았습니다.

const TwitterShareButton = memo((props) => {
  const { url, via, hashtags } = props

  const onClick = (e) => {
    console.log('Twiiterまで移動した!!!', e)
  }

  const onShare = useCallback((e) => {
    console.log('shared!!!',e)
  }, [])

  useEffect(() => {
    twttr.widgets.load()
    twttr.ready(function(twttr) {
      twttr.events.bind('click', onClick);
      twttr.events.bind('tweet', onShare);
    })
  }, [])

  return (
    <a href='https://twitter.com/intent/tweet' className='twitterShareButton' data-url='https://twitter.com/' target="_black">
      { props.children }
    </a>
  )
})

html에

window.twttr = (function (d,s,id) {
 var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));

여기를 스크립트 태그에 추가하고 있습니다.

target='_black'로 하고 있는 것은, 현실장으로 사용하고 있는 window.open()이라면 event를 취득할 수 없기 때문입니다.

결과

결과적으로 다음과 같은 움직임을 일으켰습니다.
제가 취한 액션으로는

Twitter 공유 버튼 (오리지널 버튼)을 클릭
┗　twttr.events.bind('click', onClick);이 움직이는 가정
⇓
다른 탭이 열리고 트위터 화면이 되어 공유 텍스트를 입력할 수 있습니다.
⇓
트윗
┗　twttr.events.bind('tweet', onShare);

라고 하는 액션을 취해 갔습니다만,

트위터 화면에 갈 때,

이런 로그를 토해내게 되었습니다.
즉 twttr.events.bind('tweet', onShare);는 이상적인 움직임을 하지 않았다고 합니다.

왜 작동하지 않는가?

Twitter의 공식 포럼에서는 2015년에 다음과 같은 수정이 들어갔다고 썼습니다.
h tps : // / 와 ぃ r こむにty. 코 m / t / 후 rth 코민 g 짱 - 토우 b

이전에는 트위터 공유의 게시 버튼을 누르고 게시된 시점에서 callback이 돌아왔다고 합니다만, 지금은 indent가 호출된 시점에서 callback하도록 변경된 것 같습니다.
일본어 번역으로 발췌하면

TwitterをWebサイトで使用する場合。アクションが完了した後ではなく、ユーザーがページでアクションを呼び出したときにトリガーされるようになりました。

この変更を行っているのは、過去数年の間にモバイルへの移行により、これらのイベントがページへのやり取りを伝えるための信頼性の低い代表的な手段になったためです。

2015년 포럼이므로 정보가 오래된 것일까? 라고 느끼고 있습니다만, 이후 포럼에서 이상으로 하고 있는 거동을 만나는 일은 없었습니다.

끝에

그렇다면 Twitter의 document 고쳐 주지 않을까 ~~~~라고 조금 생각해 버렸습니다.
혼란스럽다고. .

뭔가 실수가 있으면 지적 부탁하고 싶습니다.
읽어 주셔서 감사합니다.