Google Analytics のスクリプトでエラーが出たときの対処

Google Analyticsを利用するとき、以下のスクリプトを自分のサイトのhead部(<head>〜</head>の間)に貼り付けます。


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-990000000-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'XX-990000000-1');
</script>

※「id=XX-990000000-1」はダミーとして書き換えてます。

[広告]

このとき、このスクリプトの影響でPHPがエラーになって画面表示ができなくなってしまったときがありました。全部の画面ではなくて一部のPHPファイルです。WEBサーバーのエラーログには「PHP Parse error: syntax error, unexpected 'js' (T_STRING), expecting ',' or ';'」というログが出力がされていました。いろいろ調べてみたところでPHPファイルのどこが悪いのかわからなかったのですが、Google Analyticsのスクリプトのシングルクォートをダブルクォートに変えることでエラーを回避できました。

修正前
gtag('js', new Date());
gtag('config', 'XX-990000000-1');
 ↓
修正後
gtag("js", new Date());
gtag("config", "XX-990000000-1");

ダブルクォートに変えてもGoogle Analyticsの解析結果としてあがってきているのでGoogle AnalyticsのスクリプトでPHPのエラーが出るようなら試してみてください。

スポンサーリンク

CSSのボックスモデル(CSSで画像を中央にする方法)

Webで画面レイアウトをいじくろうとしたときに、margin、border、padding がどこの部分だっけ?と忘れてしまうのでボックスモデルと呼ばれるものを書いてみた。

CSSでは内容(Content)に対して幅と高さの指定ができて、余白部分がpadding、border、marginとなるんだなと。ただこのボックスモデルはブロックレベル要素には効くのだがインライン要素には効かないときがあるらしい(後述)。

[広告]

ブロックレベル要素とは要素の前後に改行が入って要素同士が縦に並ぶもの。インライン要素とは要素の前後に改行が入らず要素同士が横に並んでいくもの。HTMLタグでいうと以下です。

ブロックレベル要素
・div
・h1〜h6
・p
・ul, ol, li
・table
・form
 など

インライン要素
・a
・span
・img
・label
 など

先ほどインライン要素ではボックスモデルの指定が効かないときがあると書きましたが、具体的に言うと「marginは左右は効くが上下は効かない」、「paddingは他の要素の領域を考慮しないので重なるときがある」らしいです。なので、インライン要素でmargin、paddingを使うときは注意が必要そうです。

[広告]

初歩的なんですけれども、、、画像を中央にしたくって、CSSをいじくったときの話。
div(ブロックレベル要素)の中にあるimg(画像)を中央にするにはCSSを以下のようにすればうまくいきました。

■HTMLの内容
<div class=”abc”>
  <img ・・>
</div>

■CSSの内容
.abc { text-align: center;
   margin-left: auto;
   margin-right: auto}

margin-leftとmargin-rightをautoにしておけば画像が中央にいくとばかり思っていたのですが、それだけではdivのブロック領域が中央にいくだけで画像は真ん中より少し左によってしまいます。画像自体も真ん中にするにはtext-alignを使う必要がありました。text-alignは文字列に使うものだと思っていましたが画像にも使えるみたいです。もう少し言うと、text-alignはインライン要素に使えるようです(ブロックレベル要素には使えない)。

スポンサーリンク