Ruby on Rails にGoogle Tag Managerを導入する方法

✏️️ 2019/08/16 👍️2019/08/16 🔗

概要

Turbolinksを利用しているRuby on RailsのアプリケーションにGoogle Tag Managerを導入します。Google Tag Managerとは、アプリに含まれる「タグ」(トラッキングコードなど)の管理システムです。

導入方法

Google Tag Managerにアクセスし、コンテナIDを取得します。

コンテナIDはconfigを用いて管理しています。

# config/settings/production.yml
google:
  gtm_id: 'GTM-******' 

Google Tag Manager用のLayoutsファイルを作成します。

# app/views/layouts/_google_tag_manager.html.erb
<script>
    document.addEventListener('turbolinks:load', event => {
        let url = event.data.url;  dataLayer.push({
            'event':'pageView',
            'virtualUrl': url
        });
    });(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',"<%= Settings.google.gtm_id %>");
</script>

Google Tag Manager (noscript)用

# app/views/layouts/_google_tag_manager_noscript.html.erb

<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=<%= Settings.google.gtm_id %>" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

作成したレイアウトファイルをapp/views/layouts/application.html.erbで読み込みます。本番環境のみ表示させたいのでif Rails.env.production?にします。app/views/layouts/_google_tag_manager.html.erb<head>内のなるべく上の方にします。app/views/layouts/_google_tag_manager_noscript.html.erb<body>の直後で読み込みます。

# app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <%= render 'layouts/google_tag_manager' if Rails.env.production? %>
      ・
      ・
      ・
  </head>
  <body>
    <%= render 'layouts/google_tag_manager_noscript' if Rails.env.production? %>
      ・
      ・
      ・
  </body>
</html>

以上で、Ruby on Rails にGoogle Tag Managerを導入する方法は完了です。

参考

Akito
日本のスタートアップで主にRuby on Railsを使ってプロダクト開発をしています。