wordpressサイトへのgoogleトラッキングコードの埋め込み方法

2020年10月9日

wordpressにgoogleのトラッキングコードを埋め込むにはいくつか方法があるけど、小テーマを作ってfunctions.phpにコードを書いて埋め込むことにした。

まずは小テーマの準備。
wordpress
　└ wp-content
　　　└ themes

ここに作りたい子テーマのフォルダを作る。フォルダの中には、style.cssと、functions.phpを作る。

以下、style.cssのコード

style.css
1
2
3
4
5
6
7
/*
Theme Name: 親テーマ名-child
Template: 親テーマのフォルダ名
Author: 名前
*/
  
@import url('../親テーマ名/style.css');

以下、functions.phpのコード。

functions.php
1
2
3
4
5
6
7
8
9
10
11
<?php
 
function add_google_tracking_code () {
    if ( ! is_user_logged_in() ) {
        echo "ここに埋め込みたいトラッキングコードをコピペ";
    }
}
 
add_action('wp_head', 'add_google_tracking_code' );
 
?>

注意点があって、googleのトラッキングコードには’（シングルクォート）と、"（ダブルクォート）が混在している。
そこで、エスケープシーケンスを追加するか、もしくはシングルクォートかダブルクォートのどちらかに統一をする必要がある。

なので、今回はgoogleトラッキングコードの"（ダブルクォート）の前に\（バックスラッシュ）を追記したので、実際はこんな感じになるはず…

functions.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
 
function add_google_tracking_code () {
    if ( ! is_user_logged_in() ) {
        echo "<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src=\"https://www.googletagmanager.com/gtag/js?id=自分のトラッキングコード\"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
 
  gtag('config', '自分のトラッキングコード');
</script>
";
    }
}
 
add_action('wp_head', 'add_google_tracking_code' );
 
?>

因みに、バックスラッシュをmacで入力するときは、alt（option）を押しながら￥キーを押す。

参考サイト

TipsMac,php,wordpress

Posted by ucci1372