EC-CUBE3に対してGoogleAnalyticsタグ、Googleタグマネージャ、Yahooタグマネージャーの設置方法

EC-CUBE3 PHP

EC-CUBE3でサイト運用されている方が徐々に増えてきているのですが、ECサイト如何に関わらずサイト運営に必要になってくるのかGoogleタグマネージャやYahooタグマネージャー等のサイト解析を行うためのツールです。

EC-CUBE3でこのタグを簡単に埋め込む方法を説明します。

GoogleAnalyticsタグの設置方法

GoogleAnalyticsタグは</head>の上に設置するのですが、こちらはブロック管理を使って簡単に埋め込む事が可能です。

先ず、管理画面よりブロック管理機能を使ってサイト用のトラッキングコードを入力してブロックを作成します。

管理画面から 、 [コンテンツ管理]→[ブロック管理]→[新規入力]を選択し、ブロック名とファイル名には分かるように
ブロック名 : GoogleAnalytics(任意)
ファイル名 : analytics(任意)

と入力し、ブロックデータにはサイト用のトラッキングコードを入力してブロックを作成します。

<!-- Google Analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxxxxxx-x', 'auto');
  ga('send', 'pageview');

</script>

その後、作成したブロックをページ管理機能を使って配置します。

配置方法は、 [ページ管理]→[TOPページのレイアウト編集]を選択し、
未使用ブロック欄に先ほど作成したブロックが含まれているためそれをheadに配置します。 #headerではありませんのご注意ください。

全ページに適用させるなら「全ページ」にチェックし登録するとGoogleAnalyticsタグが設置されます。

Googleタグマネージャの設置方法

Googleタグマネージャは<body>タグ直後に設置します。
GoogleAnalyticsタグと同じようにブロック管理とページ管理を使って設置できればいいのですが、<body>タグ直後に設置するための方法が用意されていませんので、直接タグを埋め込む必要があります。

default_frame.twigに対して<body>直下にGoogleタグマネージャ用タグを設置します。

{# ▲Head COLUMN #}

</head>
<body id="page_{{ app.request.get('_route') }}" class="{{ body_class|default('other_page') }}">
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager --> 
<div id="wrapper">
    <header id="header">

というように直接タグを埋め込んで保存すればGoogleタグマネージャの設置が完了です。

Yahooタグマネージャーの設置方法

Yahooタグマネージャーは</body>タグ直前に設置します。
こちらもGoogleAnalyticsタグと同じようにブロック管理とページ管理を使って設置できればいいのですが、</body>タグ直前に設置するための方法が用意されていませんので、直接タグを埋め込む必要があります。

こちらもdefault_frame.twigに対して</body>直前にYahooタグマネージャー用タグを設置します。

</script>
{% block javascript %}{% endblock %}
<!-- Yahoo Tag Manager -->
<script type="text/javascript">
  (function () {
  var tagjs = document.createElement("script");
  var s = document.getElementsByTagName("script")[0];
  tagjs.async = true;
  tagjs.src = "//s.yjtag.jp/tag.js#site=xxxxxxx";
  s.parentNode.insertBefore(tagjs, s);
  }());
</script>
<noscript>
  <iframe src="//b.yjtag.jp/iframe?c=xxxxxxx" width="1" height="1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</noscript>
<!-- Yahoo Tag Manager -->
</body>
</html>

というように直接タグを埋め込んで保存すればYahooタグマネージャーの設置が完了です。

Googleタグマネージャ、Yahooタグマネージャーについてはdefault_frame.twigに対してタグを埋め込む方法を説明しましたが、
ECCUBEROOT/src/Eccube/Resource/template/default/default_frame.twig
に対して直接変更をする方法はEC-CUBE3では推奨していません。

ではどのように編集するかというと、default_frame.twigファイルを ECCUBEROOT/app/template/default
直下にコピーし、そのファイルに対して修正を加えます。

この仕組みは説明すると長くなりますのでこういうものだと覚えてください。

ブロック管理やdefault_frame.twigの仕組みさえ理解できれば簡単にタグが設置する事が可能になりますし、 facebook Page pluginやTwitter、Instagramなども簡単に設置可能なので、ぜひお試しください。