2026年8月2日

wordpress google tag manager implement

カスタマイズ

はじめに

Google Tag Managerはウェブサイトのタグ管理を容易にするツールであり、広告効果測定やウェブ解析などを行う際には非常に有用です。WordPressサイトへこのツールを実装することで、ウェブマーケティング活動が大きく向上します。

症状・背景

Google Tag Managerが必要になる主な場面:

ウェブサイトのアクセス解析を始めたい場合
広告効果測定やリマーケティングを行いたい場合
複数のタグやスクリプトを管理したい場合
既存のウェブサイトに新たなトラッキング機能を追加したい場合

手順・設定方法

ステップ1: Google Tag Managerアカウントを作成する

# Google Tag Manager公式サイトへアクセスし、アカウントを作成します。
# https://tagmanager.google.com/

ステップ2: WordPressサイトにGTMタグをインクルードする

# GTMのContainer IDを取得します。これによりWordPressサイト上で使用可能になります。
# Container IDはGoogle Tag Managerダッシュボードから確認できます。

# WordPressのテーマのfunctions.phpファイルまたはプラグインを通じて、以下のコードを追加します。
function add_gtm_tag() {
    $gtm_id = 'GTM-XXXXXX'; // ここにContainer IDを入力
    ?>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','<?php echo $gtm_id; ?>');</script>
    <!-- End Google Tag Manager -->
    <?php
}
add_action('wp_head', 'add_gtm_tag');

ステップ3: ページの最下部にGTMタグを追加する

# 通常、Google Tag ManagerのScriptはページヘッダーで読み込まれますが、必要に応じてフッターでも読み込むことができます。
# この方法は特にSEO最適化やパフォーマンス向上のために有用です。

function add_gtm_tag_footer() {
    $gtm_id = 'GTM-XXXXXX'; // ここにContainer IDを入力
    ?>
    <!-- Google Tag Manager -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo $gtm_id; ?>"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager -->
    <?php
}
add_action('wp_footer', 'add_gtm_tag_footer');

ステップ4: ユーザーのプライバシーを尊重する設定を行う

# 本格的にGoogle Tag Managerを使用する前に、GDPRやCCPAなどの法律に基づくユーザー同意手続きが必要です。
# WordPressプラグイン「Cookie Notice」などを使用することで容易に実装できます。

// Cookie Noticeプラグインを使用して、ユーザーがタグの読み込みを許可した場合のみGTMタグを有効化します。
function conditional_gtm_tag() {
    if ( isset( $_COOKIE['cookie_notice_accepted'] ) && 'true' == $_COOKIE['cookie_notice_accepted'] ) {
        $gtm_id = 'GTM-XXXXXX'; // ここにContainer IDを入力
        ?>
        <!-- Google Tag Manager -->
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','<?php echo $gtm_id; ?>');</script>
        <!-- End Google Tag Manager -->
        <?php
    }
}
add_action('wp_head', 'conditional_gtm_tag');

注意事項

実装前に必ずContainer IDを確認: インターネット上には多くのサンプルコードがあり、間違って利用するとサイトのトラフィックが正しく記録されない可能性があります。
Cookie同意の設定: ユーザーのプライバシーを尊重し、適切な法的対応を行うためにも、Google Tag Managerタグの読み込みにユーザーの同意が必要です。
パフォーマンスへの影響: タグやスクリプトが多いとサイトのロード速度が低下する可能性があります。効率的なコード実装を心掛けましょう。
セキュリティ上の注意: 第三者のタグ管理ツールを使用する際は、アクセス権限の設定に十分気をつけてください。

まとめ

1. Google Tag Managerアカウント作成: WordPressサイトで使用するためにまず必要となるのは、GTMアカウントの作成とContainer IDの取得です。

2. タグのインクルード: Container IDを使用してWordPressテーマやプラグインを通じてGTMタグをインクルードします。

3. プライバシー尊重: Cookie Noticeなどのプラグインを使用し、ユーザーがタグ読み込みに同意した場合のみ実行するように設定します。

4. パフォーマンス最適化: できるだけ多くのタグやスクリプトをGTMに移行することで、サイトのロード速度を向上させます。

Post Views: 13