*

要素の中身やデータが変更された時はMutationObserver

onChangeはformでしか使えない


「トップのメイン画像がスライドして表示されたときに拡張eコマースの商品のインプレッションを計測するように」と言われたとき、どうしますか?

「画像がスライドされるならGoogle Tag Managerの『要素の表示』トリガーが使えるのでは?」と思ったのですが、この画像たちはすでに表示されているようになっていて使えないという事実が判明。

画像の横の位置が動的に変わる事でスライドされるように表示されていたので、「javascriptのonChange関数やjQueryのchange関数を使えばできるなぁ」と思ったのですが、onChange関数はselectなどのformでしか使えないという事なのでこれまた却下。
(参考:HTML onchange Event Attribute(w3schools.com)

要素の属性値などを監視するMutationObserver

今回、この画像を含むdivではいくつかの要素の属性値が変わっていました。そこで今回は、MutationObserverクラスを使います。

MutationObserverクラスで指定の要素を監視

// 1.監視する対象のIDを指定
var targetNode = document.getElementById('XXXXX');

// 2.MutationObserverのオプションを実行前に指定
var config = { attributes: true, childList: true, subtree: true };
// 3. 変更があった時に実行したい処理をここに記述
var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
         if (mutation.type == 'attributes') {
            // 属性が変わった時に実行したい場合はここに書く 
            console.log(mutation.attributeName + ' が変わりました');
        }else if (mutation.type == 'characterData') {
            // データが変わった時に実行したい場合はここに書く 
        }else if (mutation.type == 'childList') {
            // 対象ノードの子ノード(テキストノードも含む)が変わった時に実行したい場合はここに書く 
        }
    }
};

// 4. MutationObserverインスタンスの作成
var observer = new MutationObserver(callback);
// 5. 対象ノードの監視開始
observer.observe(targetNode, config);

// 6. 監視を終了するときにはdisconnect()を実行
// observer.disconnect();

MutationObserverオプションはできるだけ設定すべき

2のMutationObserverのオプションのうち、attribute、characterData、childListは必ず設定しておくことをお勧めします。特にchildListをfalseにしないと、子ノードに変更があった場合にもイベントが発生するため、注意しましょう。

MutationObserverのオプション一覧

childList 対象ノードの子ノード(テキストノードも含む)に対する追加・削除を監視する場合は true にします。
attributes 対象ノードの属性に対する変更を監視する場合は true にします。
characterData 対象ノードのデータに対する変更を監視する場合は true にします。
subtree 対象ノードとその子孫ノードに対する変更を監視する場合は true にします。
attributeOldValue 対象ノードの変更前の属性値を記録する場合は true にします(attributes が true の時に有効)。
characterDataOldValue 対象ノードの変更前のデータを記録する場合は true にします(characterData が true の時に有効)。
attributeFilter すべての属性の変更を監視する必要がない場合は、(名前空間を除いた)属性ローカル名の配列を指定します。

3のif句内で実行したいことを記述します。今回は分けていますが、属性の変更時のみだけで良い場合は、最初のif部分だけで構いません。上にも書いていますが、子ノードの変更を監視したくない場合はわざと if (mutation.type == ‘childList’) 句を用意して中身を空欄にしておくなどしておいた方が安全です。

4と5はお決まりの書き方なので、そのまま使ってください。

6については終了させたいときに呼び出してください。

この記事を気に入っていただけたらいいねやツイートしていただけると、これに関するブログをもっと書くと思います。

さらにこれらも読まれてます

Pt engine

スマホ、タブレットの解析&ヒートマップが魅力的な「Pt engine」を入れてみました【Web解析】

スマートフォンユーザーの目線をヒートマップで確認 スマートフォンの解析で話題となっている「

記事を読む

スマートフォンのアトリビューション分析で注意すべき2つの落とし穴

アトリビューション分析が必要な理由 いろいろな広告がありますが、一般的なツールや広告媒体からのレポ

記事を読む

similarweb

Jリーグは海外から注目されているのか?

世界から注目される?Jリーグ セレッソ大阪に今シーズンから加入したディエゴ・フォルランがようやくフ

記事を読む

競合調査の前に、あなたの競合サイトはどこかご存知ですか?

あなたが知らない競合がある WEBマーケティングで必ず話題になるのが、「競合」についてです。

記事を読む

Pt engine

「説明が読まれていない!」ヒートマップツール「Pt engine」を使ってみて分かった事【Web解析】

先日、ヒートマップツールのPt engineをサイトに入れたことを書きましたが、その後どうなっている

記事を読む

マーケティングを一から学び直す人におすすめしたい本

マーケティングの目的 マーケティングと一言で言っても、マスマーケティングやダイレクトマーケティング

記事を読む

Webマーケティングを始める社員に読んでもらいたい本・基礎編

以前、「新入社員やマーケティング初心者に読んでもらいたい本・基礎編」を紹介しましたが、今回はこれから

記事を読む

なぜあなたのECサイトは価格で勝負するのか?尼口友厚

「唯一化」でECの価格勝負から脱却~なぜあなたのECサイトは価格で勝負するのか?【書評】~

著者はECのコンサルティング会社の代表で数年前から海外で人気のあるECを自身のブログ「海外ECサ

記事を読む

離脱率が上がったのは広告のせい?ヒートマップツールでわかるWeb解析

わずか1画面内で離脱が顕著に! 前回の「ヒートマップツール(Pt engine)を導入したら離脱率

記事を読む

ヒートマップツール(Pt engine)を導入したら離脱率が良くなった!【Web解析】

ヒートマップツールで想定外の動きがわかる 先日、ページ改善のためにヒートマップツールの「Pt en

記事を読む

:

Message

メールアドレスが公開されることはありません。

*

PR admax

PAGE TOP ↑