タグマネージャーで「$ is not a function」エラーが出る

公開日:2021/11/21

WordPressで作成したサイトに、デベロッパーツール上で以下のようなエラーが出ていました。

VM327:1 Uncaught TypeError: $ is not a function
    at <anonymous>:1:1
    at gtm.js?id=GTM-XXXXXXX:285
    at gtm.js?id=GTM-XXXXXXX:286
    at c (gtm.js?id=GTM-XXXXXXX:287)
    at Gc (gtm.js?id=GTM-XXXXXXX:70)
    at e (gtm.js?id=GTM-XXXXXXX:151)
    at gtm.js?id=GTM-XXXXXXX:55
    at Array.<anonymous> (gtm.js?id=GTM-XXXXXXX:152)
    at Object.execute (gtm.js?id=GTM-XXXXXXX:152)
    at Hk (gtm.js?id=GTM-XXXXXXX:152)

アナリティクスは動いていて、タグマネージャーの動きそのものには問題がなさそうだったのですが、とはいえよい状態ではありませんので原因を調べました。

原因：カスタムHTMLタグの書き方に問題があった

今回エラーが起きていたサイトでは、アナリティクス以外に「カスタムHTMLタグ」で作成したタグも埋め込んでおり、その書き方に問題がありました。

問題の書き方

<script type=""text/javascript"">
    $(function() {
        ～
    });
</script>

WordPress環境では、jQueryやその他のライブラリー同士で「$」記号の衝突（誤動作）が起きないよう、上記のような「$」記号から書き出すような記述にエラーが出るようになっています。

「$」記号を使用する場合は、「この$記号はjQuery用である」ということを区別する書き方にする必要があります。

修正版

<script type=""text/javascript"">
    jQuery(function($) {
        ～
    });
</script>

jQueryで「$」記号の衝突を避けるには、上記のように記述します。

「jQuery」でくくった中で「$」記号を使用することで、この中の「$」記号はjQuery用であることを定義することができます。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。