「タグ: コンピューティング」がつけられた記事

できるだけ簡単に解説!dataLayerを使ってGoogleタグマネージャーをさらに使いこなす方法

基本が身につく分かりやすいタグマネージャー解説(Googleタグマネージャ編)ではGoogle Tag Manager(以下GTM)の基本概念と、クリックイベントの取得、カスタム変数までを解説しましたが、この記事では「dataLayer変数」を解説したいと思います。この変数を使えば通常の変数などでは対応できないときでも柔軟にデータを取得することができます。javascriptの知識があったほうがいいですが、簡単な例であればなくても分かるんじゃないかとも思います。

dataLayer変数とは

dataLayer変数とは何でしょうか?GTM上で操作できる変数で、javascript変数として扱われるものです。・・・なんて聞いても分かりませんよね。僕もよく分かりません。
僕なりに使ってみて、わかりやすく表現すると、「GTMで使いたい値を、HTML上に一旦書き出しておいておく箱」のことです。

前の記事で解説したように、GTMでは、クリックされた要素のidを取得など、ページのHTML上の何らかの値を取得することができます。この要素の値というのは組み込み変数やユーザー定義変数で、GTMから直接取ってくることもできますが、あらかじめ、ページ上に書き出しておくこともできます。その時に変数に代入するわけです。

実際の例を考えてみる

dataLayer変数への代入の仕方は単純です。

  1. HTML上のjacascript変数に代入する
  2. GTMの管理画面で、書き出したHTML上の変数と同じ名前を登録しておく
たったこれだけです!具体的には以下のようになります。

dataLayer変数をHTML内で記述

dataLayerという名前の配列に 「 変数名 : 値 」 の書き方で変数に値を代入します。

<script>
dataLayer.push({
 'pageID' : 'article1'
});
</script>

測定したいページに直接記述してもいいですし、GTMを使って書き出してもいいです。

ユーザー定義変数で、データレイヤー変数を作成

↑↑↑マウスオーバー&スクロール(スマホは長押し)orクリック↑↑↑

上の動画のように、左メニューから変数をクリック、ユーザー定義変数のところで、新規を押して、次に「変数タイプを選択して設定を開始」をクリックします。右にペインが現れるので、変数のタイプを選択で「ページ変数>データレイヤーの変数」を選択します。データレイヤーの変数名のところに、先ほど定義した「pageID」を入力して名前を付けて保存します。

あとは、GTM上で、HTML上で定義した「pageID」という変数(今回の例では値に「article1」が入っている)を使用することができます。

カスタムイベントを使う場合

変数は、値を代入するものですが、イベントもdataLayer変数を使うことで自由に作成することができます。

先ほどのdataLayer変数に加えて、eventという変数を作成します。

<script>
dataLayer.push({
 'pageID' : 'article1'
 'event' : 'reloaded'
});
</script>
↑↑↑マウスオーバー&スクロール(スマホは長押し)orクリック↑↑↑

そして上の動画のように、先ほどと同様に左メニューから変数をクリック、ユーザー定義変数のところで、新規を押して、次に「変数タイプを選択して設定を開始」をクリックします。右にペインが現れるので、変数のタイプを選択で「ユーティリティ>カスタムイベント」を選択します。名前を「event」として保存します。

あとはトリガー上で、カスタムイベントを選択してイベント名に、今回の「reloaded」を入力することで、自分で定義した「reloaded」イベントを使用することができます。「reloaded」のところを変えていくつか別のイベントをdataLayer変数に登録しておけば、GTMで特定のイベントを選ぶことができます。

だいたいのことはGTM上だけでできますが、少し複雑なデータの取得などが増えてくると、GTMの記述や管理が複雑になってしまうこともあります。そういうときにdataLayerを使うとHTML上のリソースの取得をスムーズにできるのでうまく使い分けることで、よりタグマネジメントがはかどると思います。

スマホで画像や動画編集できるベストなアプリを選んでみた。インスタやtwitterに最適。

皆さんはスマホとパソコンどちらの方がよく使いますか?僕は仕事がらパソコンにずっと向かってることが多いので、スマホよりもパソコンで何でもしようとするタイプです。最近インスタを始めたんですが、インスタってスマホからしかアップロードできないんですよね・・・。(今更!) 画像や動画はしっかり編集してアップしたいので、スマホで画像や動画編集をできるアプリを今更ながら探しました。よさげな感じに落ち着いたので、選んだアプリと使い方を紹介します。

(さらに…)

レスポンシブクリッカブルマップ(イメージマップ)の作り方(Altポップアップ機能付き)

レスポンシブクリッカブルマップ(イメージマップ)の作り方(Altポップアップ機能付き)

画像にロールオーバーしたときに、リンクをわかりやすく表示するクリッカブルマップの作り方です。今回はFireworksを使っていますが、他のツールでも作れます。jqueryプラグインを入れることでレスポンシブにも対応できます。タッチパネルでも操作できます。導入したページはこちら

(さらに…)

[超決定版!]PCでの音楽管理とスマホへの転送を自動化して楽しよう。

Elektronik auf dem Schreibtisch

iPodの登場から10年以上がたった今では、パソコンとスマホでの音楽管理が当たり前になっていますね。レンタルCDをパソコンに保存するときに、mp3やファイルのタイトルなどの情報を正しく設定できていますか?せっかく借りてきたのだから、完璧なデーターを残したいですよね!楽に、かつ高音質にCD音源を管理しつつ、スマホに音楽を自動で取り込む方法を解説します。 (さらに…)

デスクトップPCを改造、静音&省電力化してサーバー機にしてみた

how_to_reuse_desktop_pc_as_a_server_top

Linuxサーバーを構築するのに、デスクトップPCを再利用してみました。4年使ったBTOデスクトップPCを、あと5年使える静音(省電力)サーバーにするべく、パーツ交換を行いました。電源、グラボ交換後の電力使用量の変化などをメモしておきます。

(さらに…)

一つのマウスとキーボードを共有できるSynergyの使い方

synergy_app_can_be_sharing_mouse_and_keyboard_top

パソコンを2台以上持っている方ならマウスやキーボードをどちらのパソコンでも使いたいことってありますよね。CPU切替器を使えば可能ですが、Synergyはソフトウェアだけで簡単にマウス&キーボードの共有を実現してくれます。

(さらに…)