2
0

More than 5 years have passed since last update.

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

Posted at

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ブロックを入れてやってました。サイト属性のほうが直感的なので良いですね。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0