みなさんこんにちは！

今回はECサイトの運用について書いていこうと思います。

ECサイトを運用していて必要になる施作として

ユーザーがどこから訪れてどのページを経由し

購入に至っているのかを明確にすることは

売上を上げていく上で必須

と言っても過言ではないことかと思います。

ShopifyではGoogle Analytics（以下GA4）と連携させ

簡単にサイト上のユーザーアクティビティを検知し集計できるのですが

埋め込んだ動画の視聴回数をカウントするのに

思ったより手間がかかったので、備忘録としての意味も込めて

ちょっとばかり技術的な記事を書きたいと思います。

前提条件として

埋め込んだ動画がYouTubeから引っ張ってきた動画であれば

そもそもYouTube Analitycsを使って簡単に測定可能なんです。

ただ、今回はmp4を直接Shopifyのセクションに埋め込んでいたため

コードを修正してGA4がイベントとして検知できる形で

飛ばしてあげる必要がありました。

作業フローを順序立てて解説できればと思います。

GA4の導入方法

基本的にはShopifyのアプリ「Google & YouTube」を

インストールしてしまえばGA4側の測定IDなどの

必要な情報を入力してすぐに使い始めることができます。

ですが今回測定したい動画の再生を検知するイベントは

デフォルトでは機能していなかったため、「theme.liquid」に

手を加えることとします。

追加したコードの内容

主に手を加えた要素は3箇所です。

コードも貼っていますのでぜひ参考にしてみて下さい。

①gtagを設置して測定IDを入力する

</head>の直前にGA4と連携するための下記のコードを入れます。

これはお約束のようなもので必ず必要になるコードとなります。

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=[GA4の測定ID]"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '[GA4の測定ID]');
    </script>

②ビデオ再生イベントを送信するためにtrackVideoPlay関数を追加

次に先ほど記述したコードの下に以下のコードを追加します。

    <script>
      function trackVideoPlay(videoId) {
      // ここで分析ツールにデータを送信
      console.log('Video played:', videoId);
      // Google Analyticsにビデオ再生イベントを送信
      gtag('event', 'play_video', {
        'video_id': videoId
        // 必要に応じて他のビデオ関連のデータを追加
      });
      }
    </script>

③Mutation Observerを使って動的にDOM要素にアクセス

最後に下記のコードを</body>タグの直前に設定します。

<script>
  // Mutation Observerのインスタンスを作成
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList') {
        // 新しい子要素が追加された場合の処理
        var newVideos = mutation.target.querySelectorAll('video');
        newVideos.forEach(function(video) {
          video.addEventListener('play', function() {
            trackVideoPlay(this.id);
          });
        });
      }
    });
  });

  // 監視の設定
  var config = { childList: true, subtree: true };

  // 監視を開始するノードを指定
  observer.observe(document.body, config);
</script>

一見単純作業に見えますが、今回は動的なDOM要素の扱いが

大きな課題となりました。

初めのアプローチで③の部分は

DOMContentLoaded イベントリスナーに依存していました。

ですがこれはページが最初に読み込まれた際にのみ機能するため

ページの読み込み後に動的に追加されるビデオ要素を

正確に捉えることができませんでした。

そこでChatGPTに駆け込みました

こんな時はもうAIの力に頼ろうということで…

壁打ちした結果、MutationObserverの導入が導き出されます。

MutationObserverは、ウェブページのDOM変更を監視し、

変更時にコールバックを実行するJavaScript APIです。

これにより、ページに後から追加されるビデオ要素を検知し、

それらにイベントリスナーを追加することができるようになりました。

これですべてのビデオ要素が正確にトラッキングされて、

いとも簡単に問題解決への道を開いたのです。

開発者ツールの活用も効果的にできました

今回のプロセスでは、ブラウザの開発者ツールが非常に役立ちました。

本格的に活用するのは初めてでコードの挙動の確認や

エラーの有無、イベントリスナーの適用状況などを

細かく検証することができました。

より踏み込んだ使い方が体験として学びにつながったので

今後も活かせるポイントになったと思います。

まとめ

今回の経験から、問題の核心を理解して

適切な技術的アプローチを選択、実装することの

重要性を学びました。

ECだけに限らず、今後のプロジェクトにおいても

非常に役立つ貴重な学びになったといえます。

技術的な問題に直面した際は一歩後退して全体像を捉え

適切な手法を選択することの大切さを忘れないようにしたいですね。