GTMonRailsは、RubyOnRailsを使う際にGoogleTagManagerとの連携を簡単に行う事をできるようにするRails用のGemです。
GTMの設置タグを出力するだけでなく、主にJavaScriptを使って行うdataLayer変数の操作や送信をRubyのコード側で行うことができます。
このGemは基本的には単品では機能しません。GoogleTagManager側での設定と合わせて使用して下さい。
Read this in other languages: English
Gemfileに以下を追記して、追加して下さい。
gem 'gtm_on_rails'
そしてbundle installを行って下さい。
$ bundle
最後に以下のコマンドを実行して初期設定を行って下さい。
$ rails g gtm_on_rails:install
インストールで追加された/config/initializers/gtm_on_rails.rb
の内容を変更することによって設定を変更して下さい。
GoogleTagManagerのコンテナIDを設定して下さい。
dataLayerには一度にPOSTできる容量に制限があります。GTMonRailsでは、dataLayerに設定された値がここで設定したバイト数を超えた場合、エラーを返します。
この設定を有効にすることによって、dataLayerにRailsのcontroller名とaction名を自動で追加して送信し、GoogleTagManager側で使用することができます。 controller名とaction名はJavaScriptのコードとしてHTMLのソースコード内に出力されるので、その点を留意して下さい。
この設定を有効にすることによって、JavaScriptのコードとして出力される際に、dataLayerに設定した値などの問題でエラーが発生場合にエラーを握りつぶします。 つまり、計測周りのエラーによってサイトの表示に影響が出ないようにします。
拡張Eコマース機能を用いる場合のデフォルトの通貨を設定します。ISO4217規格の文字列で指定して下さい。
data_layer
という変数(正確にはhelperが呼び出す変数@gtm_on_rails_data_layer)にdataLayerで送信したい内容をHash型で追加するだけでdataLayerで好きな値を送信できます。
controller内等で以下のように記述する感じになると思います。
data_layer.push({
name: 'name'
})
送信したdataLayerの内容は、GoogleTagManager側で変数に設定する等して使用して下さい。
data_layer.push(
{
name: 'name'
},
before_page_view: true
)
上記のようにbefore_page_view
属性を設定することで、GoogleTagManagerの「Page View」イベントより前にdataLayerをpushできます。
「Page View」イベント自体にdataLayerの変数を使用したい場合等に使用します。
※GoogleAnalyticsのページビュー送信より前に「ヒット」系の送信が行われてしまうと、正常にGoogleAnalyticsのページビューが計測できない可能性があるので、使用する際は注意して下さい。
object = GtmOnRails::DataLayer::Object.new({name: 'name'})
data_layer.push(object)
Hash形式ではなく、上記のようにGtmOnRails::DataLayer::Object
クラスを用いることもできます。
object = GtmOnRails::DataLayer::Object.new({name: 'name'})
object.name
object.name = 'name2'
GtmOnRails::DataLayer::Object
クラスでは、上記のように値にアクセスできます。
event = GtmOnRails::DataLayer::Event.new('イベント名', {name: 'name'})
data_layer.push(event)
上記のように記述することで、イベント名を設定して送信できます。
GoogleAnalyticsの拡張Eコマース機能を本Gemで簡単に設定できます。 拡張Eコマース機能の仕様については下記を参照して下さい。 https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce https://developers.google.com/tag-manager/enhanced-ecommerce
拡張Eコマースには、
- インプレッション
- 商品
- プロモーション
- アクション
の4種類のデータ型と、
- 商品インプレッション(product_impression)
- 商品クリック(product_click)
- 商品詳細表示(product_detail)
- カート追加(add_to_cart)
- カートから削除(remove_from_cart)
- プロモーションインプレッション(promotion_impression)
- プロモーションクリック(promotion_click)
- 決済(checkout)
- 購入(purchase)
- 払い戻し(refund)
の10種類のアクションが存在します。
4種類のデータは各アクションで使用します。 9種類のアクションは、GoogleAnalyticsの'PageView'か'Event'で拡張Eコマース機能を有効にし、データレイヤーを使用して送信します。
基本はGoogle公式のヘルプを参照して下さい。 ここではGTMonRails固有の内容のみ記載します。
ex.
GtmOnRails::DataLayer::Ecommerce::Impression.new(id: '01', name: '商品1')
キー | 説明 |
---|---|
id | ヘルプ参照 |
name | ヘルプ参照 |
list | ヘルプ参照 |
brand | ヘルプ参照 |
category | Arrayで指定することが可能。最大で5つまで指定可能。 |
variant | ヘルプ参照 |
position | ヘルプ参照 |
price | ヘルプ参照 |
ex.
GtmOnRails::DataLayer::Ecommerce::Product.new(id: '01', name: '商品1')
キー | 説明 |
---|---|
id | ヘルプ参照 |
name | ヘルプ参照 |
list | ヘルプ参照 |
brand | ヘルプ参照 |
category | Arrayで指定することが可能。最大で5つまで指定可能。 |
variant | ヘルプ参照 |
price | ヘルプ参照 |
quantity | ヘルプ参照 |
coupon | ヘルプ参照 |
position | ヘルプ参照 |
ex.
GtmOnRails::DataLayer::Ecommerce::Promotion.new(id: '01', name: '商品1')
キー | 説明 |
---|---|
id | ヘルプ参照 |
name | ヘルプ参照 |
creative | ヘルプ参照 |
position | ヘルプ参照 |
ex.
GtmOnRails::DataLayer::Ecommerce::Action.new(list: '商品一覧')
キー | 説明 |
---|---|
id | ヘルプ参照 |
affiliation | ヘルプ参照 |
revenue | ヘルプ参照 |
tax | ヘルプ参照 |
shipping | ヘルプ参照 |
coupon | ヘルプ参照 |
list | ヘルプ参照 |
step | ヘルプ参照 |
option | ヘルプ参照 |
基本はGoogle公式のヘルプを参照して下さい。 ここではGTMonRails固有の内容のみ記載します。
公式仕様:https://developers.google.com/tag-manager/enhanced-ecommerce#product-impressions
このアクションは「PageView」でGoogleAnalytics側に送信する。
ex.
GtmOnRails::DataLayer::Ecommerce.product_impression(impressions: impressions)
キー | 説明 |
---|---|
currency | 通貨。「ISO 4217」規格のアルファベットを指定する。未指定の場合はconfig/initializers/gtm_o_rails.rb で指定したデフォルト値が使用される。 |
impressions | GtmOnRails::DataLayer::Ecommerce::Impression クラスのオブジェクトまたはHashのArrayを指定する。 |
公式仕様:https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicks
このアクションは「Event」でGoogleAnalytics側に送信する。
ex.
GtmOnRails::DataLayer::Ecommerce.product_click(action: action, products: products)
キー | 説明 |
---|---|
currency | 通貨。「ISO 4217」規格のアルファベットを指定する。未指定の場合はconfig/initializers/gtm_o_rails.rb で指定したデフォルト値が使用される。 |
action | GtmOnRails::DataLayer::Ecommerce::Action クラスのオブジェクトまたはHashを指定する。 |
products | GtmOnRails::DataLayer::Ecommerce::Product クラスのオブジェクトまたはHashのArrayを指定する。 |
公式仕様:https://developers.google.com/tag-manager/enhanced-ecommerce#details
このアクションは「PageView」でGoogleAnalytics側に送信する。
ex.
GtmOnRails::DataLayer::Ecommerce.product_detail(action: action, products: products)
キー | 説明 |
---|---|
currency | 通貨。「ISO 4217」規格のアルファベットを指定する。未指定の場合はconfig/initializers/gtm_o_rails.rb で指定したデフォルト値が使用される。 |
action | GtmOnRails::DataLayer::Ecommerce::Action クラスのオブジェクトまたはHashを指定する。 |
products | GtmOnRails::DataLayer::Ecommerce::Product クラスのオブジェクトまたはHashのArrayを指定する。 |
公式仕様:https://developers.google.com/tag-manager/enhanced-ecommerce#add
このアクションは「Event」でGoogleAnalytics側に送信する。
ex.
GGtmOnRails::DataLayer::Ecommerce.add_to_cart(products: products)
キー | 説明 |
---|---|
currency | 通貨。「ISO 4217」規格のアルファベットを指定する。未指定の場合はconfig/initializers/gtm_o_rails.rb で指定したデフォルト値が使用される。 |
products | GtmOnRails::DataLayer::Ecommerce::Product クラスのオブジェクトまたはHashのArrayを指定する。 |
公式仕様:https://developers.google.com/tag-manager/enhanced-ecommerce#add
このアクションは「Event」でGoogleAnalytics側に送信する。
ex.
GtmOnRails::DataLayer::Ecommerce.remove_from_cart(products: products)
キー | 説明 |
---|---|
currency | 通貨。「ISO 4217」規格のアルファベットを指定する。未指定の場合はconfig/initializers/gtm_o_rails.rb で指定したデフォルト値が使用される。 |
products | GtmOnRails::DataLayer::Ecommerce::Product クラスのオブジェクトまたはHashのArrayを指定する。 |
公式仕様:https://developers.google.com/tag-manager/enhanced-ecommerce#promo-impressions
このアクションは「PageView」でGoogleAnalytics側に送信する。
ex.
GtmOnRails::DataLayer::Ecommerce.promotion_impression(promotions: promotions)
キー | 説明 |
---|---|
currency | 通貨。「ISO 4217」規格のアルファベットを指定する。未指定の場合はconfig/initializers/gtm_o_rails.rb で指定したデフォルト値が使用される。 |
promotions | GtmOnRails::DataLayer::Ecommerce::Promotion クラスのオブジェクトまたはHashのArrayを指定する。 |
公式仕様:https://developers.google.com/tag-manager/enhanced-ecommerce#promo-clicks
このアクションは「Event」でGoogleAnalytics側に送信する。
ex.
GtmOnRails::DataLayer::Ecommerce.promotion_click(promotions: promotions)
キー | 説明 |
---|---|
currency | 通貨。「ISO 4217」規格のアルファベットを指定する。未指定の場合はconfig/initializers/gtm_o_rails.rb で指定したデフォルト値が使用される。 |
promotions | GtmOnRails::DataLayer::Ecommerce::Promotion クラスのオブジェクトまたはHashのArrayを指定する。 |
公式仕様:https://developers.google.com/tag-manager/enhanced-ecommerce#checkoutstep
このアクションは「Event」でGoogleAnalytics側に送信する。
ex.
action = GtmOnRails::DataLayer::Ecommerce::Action.new({
step: 1
})
GtmOnRails::DataLayer::Ecommerce.checkout(action: action, products: products)
キー | 説明 |
---|---|
currency | 通貨。「ISO 4217」規格のアルファベットを指定する。未指定の場合はconfig/initializers/gtm_o_rails.rb で指定したデフォルト値が使用される。 |
action | GtmOnRails::DataLayer::Ecommerce::Action クラスのオブジェクトまたはHashを指定する。 |
products | GtmOnRails::DataLayer::Ecommerce::Product クラスのオブジェクトまたはHashのArrayを指定する。 |
公式仕様:https://developers.google.com/tag-manager/enhanced-ecommerce#purchases
このアクションは「PageView」でGoogleAnalytics側に送信する。
ex.
action = GtmOnRails::DataLayer::Ecommerce::Action.new({
id: '01',
affiliation: 'Online Store',
revenue: '35.43',
tax: '4.90',
shipping: '5.99',
coupon: 'SUMMER_SALE'
})
GtmOnRails::DataLayer::Ecommerce.purchase(action: action, products: products)
キー | 説明 |
---|---|
currency | 通貨。「ISO 4217」規格のアルファベットを指定する。未指定の場合はconfig/initializers/gtm_o_rails.rb で指定したデフォルト値が使用される。 |
action | GtmOnRails::DataLayer::Ecommerce::Action クラスのオブジェクトまたはHashを指定する。 |
products | GtmOnRails::DataLayer::Ecommerce::Product クラスのオブジェクトまたはHashのArrayを指定する。 |
公式仕様:https://developers.google.com/tag-manager/enhanced-ecommerce#refunds
このアクションは「PageView」でGoogleAnalytics側に送信する。
ex.
action = GtmOnRails::DataLayer::Ecommerce::Action.new({
id: '01'
})
GtmOnRails::DataLayer::Ecommerce.refund(action: action)
キー | 説明 |
---|---|
currency | 通貨。「ISO 4217」規格のアルファベットを指定する。未指定の場合はconfig/initializers/gtm_o_rails.rb で指定したデフォルト値が使用される。 |
action | GtmOnRails::DataLayer::Ecommerce::Action クラスのオブジェクトまたはHashを指定する。 |
The gem is available as open source under the terms of the MIT License.