読者です 読者をやめる 読者になる 読者になる

まださなぎ(旧)

誰かさんの蝋の翼。気負わず気楽に書いてくよ。

googleタグマネージャーを使って、記事ごとにブログのCSSを変更してみる

Tips Tips-ブログ関連

 
https://www.google.com/tagmanager/images/gtm-hero-illustration-small.png

(画像はgoogle先生の公式ページから直リンク引用)


だいたいタイトル通りの記事。

検索してもわかりづらい情報が多かったので、とりあえず残すことにしたよ。


ぶっちゃけた話、この記事はすでにこれが適用されている。

百聞は一見にしかず。 まずはこの記事とトップページとでも比べてみて欲しい。


  • タイトル画像変更
  • テーマ(CSS)変更
  • エントリ上のグローバルメニューに項目追加

具体的にはこの辺りを行ってみたよ。


こういった感じで、
ページごとにサイトデザインを切り替える。

……といったことをしたい人がいるといいんだけど。



1:導入

方法はたったの3ステップ。

  1. googleタグマネージャーの導入
  2. ちょっとした設定作業
  3. 成功したか確認


googleタグマネージャーの説明&導入はこの記事を参考にしてね。
ただ、現在とは少し仕様が異なることには注意。


ascii.jp


コンテナコードの貼り付け、今は二つに分かれてる。

<head>の方がスクリプトあり、<body>の方がスクリプトなし担当。


が、基本はだいたいどこ置いても動くみたいね。

google先生的にはコレジャナイ設定みたいだけど……ダイジョブダイジョブ。


2:設定


ぺたぺた画像を貼っていくから、詳しいところはフィーリングでお願い。


f:id:dettalant:20161011005808p:plain


初めにトリガー設定。

左の方にあるタグを選択してから、
赤い『新規』ってボタンををクリック。


f:id:dettalant:20161011005810p:plain


左上の名前を設定して、条件を設定して保存。


f:id:dettalant:20161011142737p:plain


ここではこういった数値を選択した。

  • ページビュー
  • ページ URL
  • 等しい
  • (このページのURL)


この設定は「(このページのURL)と同じURLでのみトリガー発動
といった条件になる。

もちろん別の条件を適用させたい人は、それらを選ぶと良い。


また、

項目 効果
ページビュー ページを読み込みはじめた時
DOM READY ページが読み込まれる中で、DOMを読み込み始めた時
ウィンドウの読み込み ページを読み込み終えた時


その際にはこの性質を覚えておくといいかも。


次がタグ設定。

f:id:dettalant:20161011005755p:plain


同じように、タグを選択して赤いボタン。


f:id:dettalant:20161011005758p:plain


上がタグ設定画面で、下がトリガー設定画面。

下のトリガー画面に、先ほど作ったトリガーを設定しよう。


f:id:dettalant:20161011005804p:plain


カスタムHTMLにして、出てきたテキストボックスに入力。


HTMLのお約束として、
テキストの初めに<style type=text/css>と入力して、
終わりに</style>と入力すること。


ここでは、はてなブログが公式でgithubに公開しているCSSを使用した。


Hatena-Blog-Themes/boilerplate at master · hatena/Hatena-Blog-Themes · GitHub


入力し終えたなら、名前を付けて保存。

これで設定は完了だよ。


3:確認


設定したなら確認。


右上にある「公開」ボタンか、下矢印開いてからプレビューボタン。

特にプレビューボタンは「まだ変更を行わずに確認」できるので、便利な代物。


で……記事書いてる時点だと、確認できなかったのよね。
まーそうだよね、URLまだ生成してないもんね……。


うまく動いてるといいんだけど……。


……うん。
きっとうまく行っていると期待して、この記事はここで終わります。

よっ、尻切れトンボ!

広告を非表示にする