見出し画像

Steamストア管理ツール"SteamWorks"のGoogleAnalyticsの設定でハマった話と解決方法

こんにちはデザイナーの山中です。

ここ10年ぐらいはゲーム関係のUIデザインや広告デザイン、マーケティングなんかをやってます🥰

最近とある案件でSteamにアプリをリリースするお手伝いをさせていただいたのですが、その時にハマった現象と解決策をメモがてらまとめてみました。検索でも全く出てこず公式ヘルプだけだと解決し辛いものもあったので同じ現象に遭遇した人の助けになれば幸いです!😭


やりたかったこと

マーケティングのデータとしてSteamページの訪問者の匿名化されたデータの取得をできればと考えていました。


最初にやったこと

公式のヘルプ

STEAMWORKS 販売とマーケティング Google アナリティクス

こちらに従い

①GoogleAnalytics側で新規プロパティを作成

②STEAMWORKSにログインして設定項目までアクセス(SWトップ>設定したいアプリケーション>[ストアページを編集]>[特殊設定]

③[Google Analytics トラッキング ID]の項目に①で作られたIDを入力

このように設定しました。


ハマったこと

STEAMWORKS(Steamの管理者ページ)で設定したはずなのに、GoogleAnalytics側に正常にデータが飛んできませんでした。


ハマりその1:GoogleAnalyticsが仕様変更してた

2020年10月のGoogleAnalyticsのバージョンアップに伴いGAがGA4となり、管理画面の仕様が変更されました。

まずGAの構造を簡単におさらいします

GAの基本

親となるアカウント(だいたい会社名とか事業名とか)をまず作成、その子として「プロパティ」の部分に目的のチャネル(サイトとかアプリとかサービスとか)ごとのプロパティを追加していって、最後に必要であればビューで各種フィルタリングや目標設定を行って見やすいデータの最適化を行うのがGAの基本的な構造です。

これまでGAでチャネルを解析するためにはプロパティを作成すると発行できる「トラッキングコード」と呼ばれるjavascriptを対象のサイトに埋め込んで使っていました。以下みたいなやつです。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=プロパティ別のトラッキングID"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'プロパティ別のトラッキングID');
</script>

けれどGA4からはプロパティを作成しただけではトラッキングコードは発行されません。

GAとSteam_1

プロパティ作成後に「どのチャネルで計測をするか」を設定する[データ ストリーム]設定をして始めてコードが発行されます。

GAとSteam_2

そのためデータストリームで[ウェブ]を選択してトラッキングコードを発行できるようにします。この際間違えがちですが[ウェブサイトのURL]は自分のサイトではなくSTEAMWORKSのヘルプページで案内されているSteamストアページのURLを入れてください。

ストアページをトラッキングする場合は、次の URL フォーマットを使用してください: 
store.steampowered.com

コミュニティハブをトラッキングする場合は、次の URL フォーマットを使用してください: 
www.steamcommunity.com

自社ドメインや自分のサービスサイトのドメインを入れてしまうとそのドメイン用のGoogleAnalyticsがSteamのトラッキングデータで埋め尽くされてしまいます。気をつけましょう。

GAとSteam_3

これで見慣れたトラッキングコードが出てきました。

GAとSteam_4

安心してコード内のID部分を抜き出してメモしました。やったぜ(実はこれがすでに罠でミスっている)。


ハマりその2:Steam側に設定されているga用スクリプトがグローバルサイトタグではなかった

やったぜと言ったな。あれは嘘だ。

…すみません、やれてませんでした。計測されませんでした。

STEAMWORKSの管理画面から変更結果を閲覧できるstore beta modeを開きGAに関連した部分のソースコードを見てみます。

<script type="text/javascript">
	try {
			if ( typeof ga != 'undefined' && ga )
			{
				ga( 'create', "SteamWorksで設定したトラッキングID", 'auto', "app", {
				anonymizeIp: true
			} );
			ga( 'app.require', 'linker' );
			ga( 'app.linker:autolink', ["store.steampowered.com","steamcommunity.com","help.steampowered.com"] );
			ga( 'app.send', 'pageview' );
		}
	} catch ( e ) { }
</script>

……あれぇ…。ga()メソッド(通称:非同期タグ)使っとる…。

ということでSteamのストアページで使われているGAのタグは現在GoogleAnalyticsから発行できるグローバルサイトタグを用いたトラッキングコードではなくGA3の旧バージョンを用いていることがわかりました。

ちなみに新バージョンは以下のようにga()ではなくgtag()となっているのでそこで見分けるのが分かりやすいかもしれません。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=プロパティ別のトラッキングID"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'プロパティ別のトラッキングID');
</script>

おそらくこれが原因か?と思ったのですが疑問がよぎります。

そもそも旧来のga()タグであってもトラッキングIDさえあっていれば正常に計測できるはずだからです。

そこで手持ちの別サイトのトラッキングIDを入れて保存してからstore beta modeページを開いた状態でGoogleAnalyticsのリアルタイム検索画面でトラッキングを見守っていたところきちんとアクセスが来ていました。

GAとSteam_5

ということでグローバルサイトタグでないことが根本原因ではなく、IDも関連した問題なのでは?という疑惑が深まりました。


真の原因:Steamページで使われている非同期タグ(ga)ではGA4発行のトラッキングIDが使えない

IDを入れ替えて何度か試してみて確信したのですが、GA4で発行される新IDはga()、つまりGA3の非同期タグでは動作しないという可能性が高いと結論づけました。

Steamだけの原因でもGoogleAnalyticsだけの原因でもない。なんとも微妙な理由が判明してしまいました。


解決編(まとめ)

解決のためなんとかGA4で旧来のトラッキングIDを持つプロパティを作成し、STEAMWORKSに登録しなくてはなりません。少し調べて以下の手順でいける事がわかりました。

◇GoogleAnalytics側

①GAの管理画面で[プロパティを作成]を選択

②[プロパティの設定]画面で[詳細オプションを表示]をクリック

③[ユニバーサルアナリティクス プロパティの作成]をチェック

④[ウェブサイトのURL]にSTEAMWORKSで案内されているSteamページのURLを設定

⑤[ユニバーサル アナリティクスのプロパティのみを作成する]にチェック

これで作成します。

GAとSteam_6

無事旧来のID(UA-から始まるもの)が発行されました。

GAとSteam_7

続いてSteam側です。

◇Steam側

①STEAMWORKSにログイン

②設定項目までアクセス(設定したいアプリケーション>[ストアページを編集]>[特殊設定])

③[Google Analytics トラッキング ID]の項目にUAから始まるIDを入力

これで完全勝利です。やったぜ。


最後に

もしこのnoteが少しでも参考になったり役に立ちましたらTwitterなどでシェアしていただけると嬉しいです。「いいね!」をいただけるだけでもまたこういった情報シェアしようかな…というモチベーションが湧くのでたいへんうれしいです!

よろしくお願いいたします!

ありがとうございます!牛丼にとんじるとサラダをつけようと思います!