🐙

GTM+GA4でデータ計測できるようにする①

2023/02/21に公開

Google Analytics

googleタグマネージャー（以下GTM）でGA4を利用できるようにします。

GTMとGA4の連携

GA4

GA4の管理画面、管理＞プロパティ＞データストリームから、データストリームの詳細が表示されます。
GTMと連携するために、以下画像の測定IDを利用します。

GTM

次にGTMの管理画面にてタグを作成していきます。
タグ＞新規から、タグ設定＞Googleアナリティクス:GA4設定を選択します。
測定IDは先ほどのGA4の測定IDを入力します。
トリガーはAll Pagesを選択します。

EC-CUBE(2系)の設定

EC-CUBEのテンプレートにタグを埋め込みます。
GTM管理画面の上部にある「GTM~」から始まるIDをクリックすると、タグの説明が表示されるので、それに倣ってタグを埋め込みます。

例: default/site_frame.tpl

default/site_frame.tpl

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<!--{* ↓ここ↓ *}-->
<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-hogehoge');</script>
<!-- End Google Tag Manager -->
<!--{* ↑ここ↑ *}-->
<meta http-equiv="Content-Type" content="text/html; charset=<!--{$smarty.const.CHAR_CODE}-->" />
<title><!--{$arrSiteInfo.shop_name|h}--><!--{if $tpl_subtitle|strlen >= 1}--> / <!--{$tpl_subtitle|h}--><!--{elseif $tpl_title|strlen >= 1}--> / <!--{$tpl_title|h}--><!--{/if}--></title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

例: default/site_main.tpl

default/site_main.tpl

<!--{strip}-->
    <body class="<!--{$tpl_page_class_name|h}-->">
<!--{* ↓ここ↓ *}-->
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-hogehoge"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
<!--{* ↑ここ↑ *}-->
        <!--{$GLOBAL_ERR}-->
        <noscript>
            <p>JavaScript を有効にしてご利用下さい.</p>
        </noscript>