*

要素の中身やデータが変更された時は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については終了させたいときに呼び出してください。

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

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

複数のトリガーをすべて満たしたら発生させるトリガーグループ

複数のトリガーを条件に使える新機能「トリガーグループ」Googleタグマネージャーを使っていると、あ

記事を読む

Google Tag Managerが入ってなくてもテストできる、Tag Manager Injector

Google Tag Managerは万能 Google Analyticsを使うときにはGoog

記事を読む

検索エンジン経由の訪問者数を増やす3つのポイント【SEO対策】

今週、急に訪問者が急増 私のサイトはもともと訪問者数は多くありませんが、今週、訪問者数が急増しまし

記事を読む

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

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

記事を読む

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

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

記事を読む

Pt engine

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

similarweb

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

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

記事を読む

Pt engine

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

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

記事を読む

:

Message

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

*

PR admax

PAGE TOP ↑