Help us understand the problem. What is going on with this article?

concrete5で、Googleタグマネージャーを実装する

More than 3 years have passed since last update.

concrete5 ver8系を前提にお話します。

concrete5でトラッキングコードを貼るには

管理画面→システムと設定→SEOと統計→トラッキングコード

で設定できます。

qiita_c5_tagm.jpg

昔は、head要素の中に出すしかできなかったのですが、閉じbody直前でも出せるようになりました(v8から)

WordPressみたくプラグイン入れたり、はたまたテンプレートにハードコーディングしたりしなくて良いので、とても便利です。

タグマネージャーの仕様はトリッキー

しかし、タグマネージャーはちょっと厄介です。

qiita_c5_tagm2.jpg

ご覧のように、

  • head開始直後
  • body開始直後

の2箇所に貼らなければなりません。

既に用意されている「トラッキングコード」のフィールドに貼ると、必ずしもheadの最上位に来るというわけではありません。また、「トラッキングコード」は、body開始直後にも出せません…

サイト属性を使う

そこで、v8から用意されたサイト属性を使って対処します。

管理画面→システムと設定→カスタム属性

を選びます。

「属性を追加」から「テキスト(複数行)」を選択。適当な名前とハンドルをつけます。

もう1個追加します。こちらも上記と同じ処理をします。

スクリーンショット 2017-09-27 19.43.25.png

こういう感じ。上記は1つだけですが、要はhead開始直後とbody開始直後用のフィールドを作ってあげます。

属性の作成が終わったら、実際に入力します。場所は、

管理画面→システムと設定→基本→サイト名&属性(Name&Attribute)

ここにアクセスすると、既に作成された属性がありますので、タグマネージャーの管理画面から、それぞれのトラッキングコードをコピペして終わります。

コードサンプル

次に、テーマテンプレート側に、サイト属性を呼び出す記述を記します。

呼び出し方は、公式に書いてあります。

なお、ハンドルは、ちゃんと自分がつけた名前に変えましょう。

head開始直後

header.php
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
<!DOCTYPE html>
<html class="no-js" lang="<?php echo Localization::activeLanguage()?>">
<head>

    <?= Core::make('site')->getSite()->getAttribute('gtm_head_start'); //← ココ ?>

    <?php Loader::element('header_required');?>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?php echo $view->getThemePath()?>/assets/css/app.css">
<!-- 以降続く -->

body開始直後

header.php
<body>

  <?= Core::make('site')->getSite()->getAttribute('gtm_body_start'); //← ココ ?>

  <div class="<?php echo $c->getPageWrapperClass()?>">
    <div class="row expanded">
      <div class="xxlarge-2 columns l-left-column">
<!-- 以降続く -->

ちなみに…

v8が出るまでは、グローバルエリアでやってました。head開始直後にグローバルエリア刻むのはキモチ悪いのですが、管理画面からブロックを入れられるので、HTMLブロックを入れてやってました。サイト属性のほうが直感的なので良いですね。

kohki-shikata
Fav: ['concrete5', 'Zurb Foundation', 'Vue.js']
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away