ミギムキ

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

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です。