WordPressにGoogleタグマネージャを導入するには、いくつかの方法があります。
パッと思いつくもので3つ。
- プラグインを使う方法
- functions.phpのみで実装する方法
- テンプレートファイルに書き込む方法
使用しているテンプレートによって採用できる方法を検討する必要がないのは、1番目のプラグインを使用する方法で特にプラグインをあまりたくさん使いたくないんだ！というこだわりがなければ、プラグインによる導入をお勧めします。
この記事では、テンプレートファイルに直接書き込む方法については解説していません。
プラグインを利用する方法と、functions.phpで実装する方法の2つをご紹介しています。
どちらかというとご紹介するプラグインでの導入をお勧めします。
いつかの未来に仮にGoogleタグマネージャーのスニペットタグの仕様が変更となったとしても、プラグインの開発が止まってさえいなければプラグインのアップデートのみで対応できる可能性が高いためです。
導入もプラグインを利用する方法はとにかく手軽で簡単です。
functions.phpに書く場合は、「ログインユーザーの場合はスニペットタグを表示しない」といった独自のロジックを組めるため、柔軟性が高く便利です。
この記事ではWordpressにGoogleタグマネージャーを導入する一番簡単な方法であるプラグインの導入方法をご紹介します。
はじめに。データレイヤーを使用する場合との違いは？
データレイヤーとは、タグマネージャにサイト側から何かしらのデータを簡単に受け渡しできる機能です。
厳密には「機能」ではないのですが、ざっくり言うと「タグマネージャにサイト側のデータを渡したい時にはデータレイヤーを使用する」と捉えていただいて良いかと思います。
dataLayerというタグマネージャが参照する配列型の変数に対して、サイト管理者は、投げたいデータを配列に要素を追加するpushで追加していきます。
ここで追加した各要素は、データレイヤー変数として、タグマネージャにて取得し、条件分岐やデータそのものとして利用することができるようになります。
上記のように、タグマネージャに対してwordpress側から何かしらのデータを渡したい場合は、当ページで紹介する2つのタグマネージャ設置方法では実現できません。
なお、タグマネージャを通してアナリティクス計測のページビューのみを取得する際は、このページの方法で対応可能です。
簡単！プラグインでタグマネージャを設置する方法
インストールするプラグインはその名前の通り「Google Tag Manager」というプラグインです。
このプラグインは、単純にタグマネージャーに必要な最低限のタグを出力するためだけのプラグインで非常に軽量です。
タグマネージャの設置タグは2つあり、その中の一つに<body>直下に設置するべき<noscript>で囲われたタグがあるのですが、この「<body>直下」というのがややこしく、Wordpressの標準では<body>タグ直下に何かを挿入するためのフックがありません。
このタグを導入するには、テンプレート独自のアクションフックがない場合は、テンプレートそのものに書く方法がよく紹介されていますが、オリジナルのテンプレートであれば良いのですが、配布されたテンプレートなんかを直接触るのはアップデート時に先祖返りなどの可能性もありあまり気が進まない方法です。
今回ご紹介する「Google Tag Manager」については、2つのタグは必ず設置され、<body>直下に置くべきとされるスニペットタグについては、使用しているテンプレートによって出力箇所を出し分けしてくれています。
Genesisフレームワーク、Theme Hook Alliance、THA Unprefixedがあればそのフックによって<body>直下に配置し、一般的なテンプレートを使用している場合は、wp_footer()をフックにして<noscript>タグを出力しています。
一般的なテンプレートの場合は、<body>直下ではなくテンプレートに不具合が発生しないように、標準フックで実現できるwp_footer()で</body>タグ(body閉じタグ)の直上に出力してくれています。
プラグインの中には、この<body>直下におくべきとされているタグ自体を出力していないものもありましたので、タグマネージャーの指示通りになるべく添える形でかつ、簡単に導入でき、軽量である、という点では、このプラグインが一番最適なのではないかと思います。
深い分析が必要な場合は別のプラグインがおすすめです
WordPressが持っているデータなど（ログインユーザー名など）を利用してデータの分析を行う場合、データレイヤーといって、何かしらのデータをタグマネージャに渡す場面も必要になってきます。
こういった場合は、また別のプラグインの方がおすすめなので、この「Google Tag Manager」については、とりあえずタグマネージャをWordpressに導入し、wordpress側からのログインユーザー情報などをタグマネージャに送る必要がない場合に利用してみてください。
前置きが長くなりましたが、インストールの方法です。
Google Tag Managerプラグインのインストール手順
WordPressの管理画面の「プラグイン」から「新規追加」をクリックします。
左メニューの場合は、「プラグイン」メニューの中に「新規追加」です。
右上にある、検索窓に「Google Tag Manager」と入力します。
該当するプラグインが出てきますが、George Stephanisさん作成のものです。
「今すぐインストールする」ボタンを押してインストールし、インストールが完了したら「有効化」ボタンを押してプラグインを有効化します。
このプラグインは設定画面がなく、Wordpressの「設定」メニューの「一般」設定に項目が追加されます。
左のメニューから、「設定」->「一般」に進んで、下部に追加されているGoogle Tag Manager IDの項目に、タグマネージャで発行されたIDを入力して設定を保存します。
これで、サイトのフロント側のソースにタグマネージャのスニペットタグが表示されるようになります。
きちんとデータが取れているかをチェックするには、アナリティクスをタグマネージャで設定する方法でデータを取得してみてチェックしてみましょう。
Googleタグマネージャへのアナリティクスを設定方法は下記記事をご覧ください。
プラグインを使用せず、functions.phpで対応する方法
このプラグインと同様の機能は、プラグインを使わずともfunctions.phpで実現できます。
今回導入したプラグイン「Google Tag Manager」は、タグマネージャから発行されたタグを、head内とbody内(標準的なテンプレートであればbody閉じタグ直前)に出力するだけの軽量な仕様です。
一般的なテンプレートの場合は、<body>直下に何かを挿入するためのフックがないため、このプラグインでは<noscript>タグは</body>直前に出力する仕様になっています。
この仕様を踏襲すると下記のようになります。
Genesisフレームワークを利用している場合
Genesisフレームワークを利用している場合は、上記コードの「wp_footer」フックの部分を「genesis_before」に変更するだけです。
add_action( 'wp_footer', function(){
↓
add_action( 'genesis_before', function(){
「genesis_before」フックは、ドキュメントソースの開始タグの直後に実行されるフックで、つまりはbodyタグ直後に実行されます。
Genesisフレームワークには、もともと、Theme Settingsメニューから、bodyタグ直下にコードを指定できるので、そもそもfunctions.phpで管理するか悩ましいところですが、わたしは、ログインしているユーザーがいる場合はタグマネージャのタグ自体を展開しないようにしたかったため、タグマネージャから発行される2つのタグをfunctions.phpで管理する方法を採用しました。
ログインユーザーの場合はタグを表示させない方法は、下記記事に記載しています。
以上、「WordpressにGoogleタグマネージャを設置する方法(データレイヤーなし)」のご紹介でした。
コメントを残す