ステージングサイトとアナリティクス

Mon, 15 Jul 2019 07:26:08 +0900

もちろんのことなのですが、私のお客さんのプロジェクトは皆パブリックでアクセスできる開発サイトがあります。そこで開発をするわけでなく、あくまでも本サイトにインストールする前に変更をお客さんに見てもらい使ってもらい、フィードバックをもらうためのサイトです。その意味では、ステージングサイトと言った方が正しいですね（お客さんとの間では開発サイトと呼んでいます）。

本サイトと違う部分

本サイトとステージングサイトの環境はシステムレベルではまったく同じで、OSもPHPもMySqlのバージョンなどすべて同じです。違うのは使用しているAWSのEC2のスケールで、ステージングにはもちろん安いインスタンスを使用しています。

プログラムレベルでは、Laravelの.envの中身。データベースの接続情報やメールの宛先とか、その他たくさん。しかし、この.envのおかげでステージングの設定は非常に簡単になりました。

それ以外にも、ずっと昔にどういうわけか間違ってステージングサイトで買い物をする本物のお客さんが出てきたので、サイトには必ず、ベーシック認証、そうあのポップアップの認証、をかけて保護しています。以下はサンプルですが、Laravelのための.htaccessを編集しています。

.htaccess

<IfModule mod_rewrite.c>
	# 以下4行はベーシック認証。ステージングのみ。パスワードは/etc/httpd/.htpasswdに保存。
	AuthType Basic
	AuthName "Password Protected Area"
	AuthUserFile .htpasswd
	Require valid-user

	<IfModule mod_negotiation.c>
		Options -MultiViews
	</IfModule>

	RewriteEngine On

	# Redirect Trailing Slashes...
	RewriteRule ^(.*)/$ /$1 [L,R=301]

	# Handle Front Controller...
	RewriteCond %{REQUEST_FILENAME} !/assets
	RewriteCond %{REQUEST_FILENAME} !/server-status
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteRule ^ index.php [L]

</IfModule>

アナリティクス

ステージングではもう１つ重要な違いがあります。ブレードに埋め込んでいるアナリティクスの情報です。

最近までは、以下のように、.envのAPP_ENV=productionの時だけレンダーするように、ブレードには @if (config(‘app.env’) == ‘production’)の条件文を使用していました。

...
@if (config('app.env') == 'production') 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123456-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123456-1');
</script>
@endif
...

しかし、アナリティクスも複雑になってきて、グーグルタグマネージャも使用し始めたので、アナリティクスも開発のために本サイトとは違うアカウントあるいはプロパティを作成して本サイトと分ける必要が出てきました。となると、トラッキングID（上では、UA-123456-1）が本サイトとステージングサイトでは異なることになります。

トラッキングIDの値は、以下のように.envで簡単に設定することにします。

.env

...
GA=UA-123456-1
GTM=GTM-XYZ

GAはアナリティクスのトラッキングIDで、GTMはタグマネージャのコンテナIDです。

さらに、config/local.phpを作成します。

config/local.php

<?php

return [
    'ga'                        => env('GA'),
    'gtm'                       => env('GTM'),
];

そして、ブレードでは、

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

  gtag('config', '{{ config('local.ga') }}');
</script>
...

とします。もう、@ifの条件文はもう必要でないので削除されていることに注意してください。

これで、本サイトであろうとステージングサイトであろうと、.envによりアナリティクスのIDを変更することができます。

アナリティクス on ララジャパン

ステージングサイトとアナリティクス

本サイトと違う部分

アナリティクス