javascript - React JS + Google タグ マネージャー: ページ遷移時にデータ レイヤーをトリガーする方法

Question

React アプリケーションで GTM (Google タグ マネージャー) にデータを送信しようとしたときに問題が発生しました。関連するページにさまざまなスクリプトを配置することができました。

たとえば、以下はカート ページに配置したスクリプトの 1 つです。

class Cart extends Component {

  render() {
    const { cartItems } = this.props;
    return (
      <script
        dangerouslySetInnerHTML={{ __html: `
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            event: 'viewCart',
            cartItems: ${cartItems}
          });
          window.history = window.history || [];
          window.history.pushState({
            page: 'Current Cart Page',
            events: 'viewCart',
            cartItems: ${cartItems},
          }, 'Current Cart Page');
        ` }}
      />
    );
  }
}

上記のスクリプトは、別のページ (例: ホームページ) からカート ページにアクセスすると実行されませんが、ページを更新するとトリガーされます。

pageLoadデータ層だけがプッシュされ、DOMReadyイベントが発生したことが判明しました。しかし、そうではありませんhistoryChange

以前にこれに遭遇し、解決方法を知っている人はいますか?