LoginSignup
1
1

More than 5 years have passed since last update.

Yahooタグマネージャー内で無理やりjQueryを使う方法

Last updated at Posted at 2017-07-28

jQueryが存在しないページにおいて、Yahooタグマネージャー内でjQuery入りのコードをどうしても動かしたいときの方法。

例えば、jQuery入りのカスタムタグを複数ページに設置しなければならないのに、
その内一部のページにのみjQueryが入っていない、そしてhtml本体の編集は諸々の事情でできない、と言ったときに有効な手段。prototype.jsとの競合も防げる。
(あるいは突然jQueryが外されたときの為の保険としても使える。)

このやり方は以下のYahooタグマネージャーの挙動を利用する。

jQuery
イベントがタグの中に構成されたとき、Yahoo!タグマネージャーはjQueryと呼ばれるJavaScriptライブラリーを使⽤し、イベントバインディングを実⾏します。
多くのサイトが既に、イベントとして追跡したいフォームやボタン操作などのインタラクティブなメニューを設置するためにjQueryを使⽤しています。
もし既にjQueryを使⽤している場合は、Yahoo!タグマネージャーはページにあるライブラリーを感知して使⽤します。もしページからjQueryライブラリーを感知できない場合は、ウェブサイトにある他のライブラリーと対⽴する可能性のないバージョンのjQueryを読み込みます(Yahoo!タグマネージャーはページにイベントが含まれる場合、感知されたときもしくは必要なときのみjQueryライブラリーを活⽤します)。

Yahoo! タグマネージャーご利⽤ガイド<上級編> 28ページより

手順

サービスタグ管理画面を開き、「サービスタグを追加」を選択
image.png

タグカタログからスマートカスタムタグを選択
image.png

サービスタグ情報内のコード中に以下のような形で即時関数を作成し、$変数にBrightTag.jQueryを割当てる。
これにより即時関数の内部で$によりjQueryを呼び出すことができるようになる。

<script>
!function($){

  /** ここにjQuery入りの処理を記述 */
  console.log($('#id').text());

}(typeof jQuery !== 'undefined'? jQuery : BrightTag.jQuery);
</script>

BrightTag.jQueryはページにjQueryが存在しないときのみ使用することができるので、既にjQueryがあるときはそれを使うようにしている。

image.png

2017/07/28現在、YahooタグマネージャーのBrightTag.jQueryにより呼び出されるjQueryのバージョンは1.5.1である。
このため、onメソッドなどは非対応であり、利用することができない。

image.png

公式に推奨されているやり方ではないので、いつどのような形で動かなくなるのか分からないので注意。最後の手段。
ちゃんとjQueryを設置して利用した方が安全。

お役立ちリンク

prototype.js入門(1)$関数 | サイブリッジラボブログ

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1