メインコンテンツへスキップ

高度な分析

8th Wallのプロジェクトは、 基本的な利用状況を分析することができ、過去30日間に何回「閲覧」されたかを確認できます。 より詳細な、あるいは過去の分析結果をお探しの場合は、WebARの体験にサードパーティのウェブ分析機能を追加することをお勧めします。

WebARにアナリティクスを追加するプロセスは、AR以外のウェブサイトにアナリティクスを追加するのと同じです。 お好きな分析ソリューションをご利用ください。

この例では、Google Tag Manager (GTM) を使用して、8th WallプロジェクトにGoogle Analyticsを追加する方法を説明します。これにより、ユーザーがWebAR体験をどのように閲覧し、対話したかについてのカスタム分析を簡単に収集することができます。

GTMのWebベースのユーザーインターフェイスを使用して、タグを定義し、特定のイベントが発生したときにタグを発火させるトリガーを作成することができます。 あなたの8th Wallプロジェクトで、コード内の好きな場所でイベントを発生させます（Javascriptの1行を使用します）。

アナリティクスの前提条件​

すでにGoogle AnalyticsとGoogle Tag Managerのアカウントをお持ちで、その仕組みについて基本的な理解があることが必要です。

詳しくは、以下のGoogleドキュメントをご参照ください：

8th WallプロジェクトにGoogle Tag Managerを追加する​

  1. Tag ManagerコンテナのWorkspaceページで、コンテナID（例： "GTM-XXXXXX" ）をクリックし、「Google Tag Managerのインストール」ボックスを開く。 このウィンドウには、後で8th Wallプロジェクトに追加する必要があるコードが含まれています。

GTM1

  1. 8th Wall Cloud Editorを開き、 top コードブロックを head.htmlに貼り付けます：

GTM2

  1. Filesの横にある「+」をクリックし、 gtm.htmlという新しいファイルを作成し、 下 のコードブロックの内容をこのファイルに貼り付けます：

GTM3

  1. app.jsの先頭部分に以下のコードを追加します：
import * as googleTagManagerHtml from './gtm.html'
document.body.insertAdjacentHTML('afterbegin', googleTagManagerHtml)

Google Tag Managerの設定​

  1. データストリームに Google Measurement ID を追加します。
  2. GTMで、 GA4 Configuration タグを作成します。

例

GTM8

ページビューのトラッキング​

ページビューはGA4 Configurationタグで自動的に追跡されます。 詳しくは、 Googleタグマネージャの設定 をご覧ください。

カスタムイベントのトラッキング​

また、GTMは、WebARの内部でカスタムアクションが発生したときにイベントを発生させる機能を提供します。 これらのイベントは、WebARプロジェクトに特有のものですが、いくつかの例を挙げることができます：

  • 配置された3Dオブジェクト
  • イメージターゲットの認識
  • スクリーンショット撮影
  • etc…

この例では、Tag（Trigger付き）を作成し、"AFrame "サンプルプロジェクトに追加します：3Dモデルが生成されるたびに発火するサンプルプロジェクト "Place Ground" に追加します。

カスタムイベントトリガーの作成​

  • トリガータイプ ：カスタムイベント
  • イベント名： placeModel
  • このトリガーは、次の場合に発火します： すべてのカスタムイベント

GTM6

タグを作成する​

次に、コード内で「placeModel」トリガーが発生したときに発火するタグを作成します。

  • タグの種類 Google Analyticsのことです：GA4 イベント
  • コンフィギュレーションのタグです：(以前に作成したコンフィギュレーションを選択)
  • イベント名です： Place Model
  • トリガー： 前のステップで作成したトリガー "placeModel"を選択します。

GTM9

重要: 作成したすべてのトリガー/タグを保存し、GTM インターフェース内で Submit/Publishの設定をライブにすることを確認してください。 参照 https://support.google.com/tagmanager/answer/6107163

8th Wallプロジェクト内部での発火イベント​

あなたの8th Wallプロジェクトで、次の行のjavascriptを追加して、このトリガーをあなたのコード内の希望の場所で起動します：

window.dataLayer.push({event: 'placeModel'})

例） https://www.8thwall.com/8thwall/placeground-aframe/master/tap-place.jsに基づいています。​
export const tapPlaceComponent = {
  init: function() {
    const ground = document.getElementById('ground')
    ground.addEventListener('click', event => {
      // 新しいオブジェクトのための新しいエンティティを作成
      const newElement = document.createElement('a-entity')

      // レイキャスターは、シーン内のタッチの位置を与える
      const touchPoint = event.detail.intersection.point
      newElement.setAttribute('position', touchPoint)

      const randomYRotation = Math.random() * 360
      newElement.setAttribute('rotation', '0 ' + randomYRotation + ' 0')

      newElement.setAttribute('visible', 'false')
      newElement.setAttribute('scale', '0.0001 0.0001 0.0001')

      newElement.setAttribute('shadow', {
        receive: false,
      })

      newElement.setAttribute('class', 'cantap')
      newElement.setAttribute('hold-drag', '')

      newElement.setAttribute('gltf-model', '#treeModel')
      this.el.sceneEl.appendChild(newElement)

      newElement.addEventListener('model-loaded', () => {
        // モデルが読み込まれたら、アニメーションを使って飛び出すところを見せる準備ができました
        newElement.setAttribute('visible', 'true')
        newElement.setAttribute('animation', {
          property: 'scale',
          to：'7 7 7',
          easing：'easeOutElastic',
          dur: 800,
        })

        // ***************************************
        // モデルが読み込まれたらGoogle Tag Managerイベントを起動
        // ***********************************
        window.dataLayer.push({event: 'placeModel'})
      }.
    })
  }
}