BlueBear

WEB屋の雑記ブログ

barbaのイベント後処理がアドセンスエラーで止まるので力技対応

2020年 2月 8日  2020年 2月 8日

barbaのイベント後処理がアドセンスエラーで止まるので力技対応

barba.js採用しているサイトで、アドセンスを有効にしたら、ロード後に起動するはずのJSが起動しなくなる事象が起こりました。

こういうときはアレだ。力技です!

Docの変更を検知して強制的に処理を動かす

変更前のコード

JavaScript

barba.init({
        transitions: [{
            afterEnter() {
                // 直後に動かすもの。 
            },
            after() {
                // 全て書き換え後動くもの
            }
        }]
    });
syntax2html

HTML

<div id="barba-wrapper" class="column is-8 kadlu-bgcolor1" data-barba="wrapper">
                <div class="barba-container" data-barba="container" data-barba-namespace="home">
                    こんてんつ
                </div>
            </div>
syntax2html

「直後に動かすもの」を動かそうとしていたのですが、アドセンスがエラーとなってしまい、その処理が登録できなかったようです。

変更後のコード

barba.init();
//----------
    //アドセンスがバグった場合barbaが機能しないので…力技実装
    //----------

    // 監視ターゲットの取得
    const target = document.getElementById('barba-wrapper');

    // オブザーバーの作成
    const observer = new MutationObserver(records => {
        // 変化が発生したときの処理を記述
    });

    // 監視の開始
    observer.observe(target, {
        childList: true
    });
syntax2html

idを使用してHTMLエレメントを拾い、MutationObserverで変化を監視。

変化がアレばメソッドを動かすようにしてみました。

ライター情報

七堂 結衣

教師→WEBデザ→フロントエンジニア

WEBマーケやWEBマスタも兼任。SNS広告で一発当てたことも…

フロント系技術を中心としたメモ書きとWEBやアフィリエイトの情報を発信しています

更新は不定期

関連記事

新規サイトで中古ドメインを使う3つの理由
新規サイトで中古ドメインを使う3つの理由

今回は「中古ドメインを使った SEO戦術ってどうなの?」 っていう話をして行こうと思います。 と言うか皆さん被リンク当ててます? ん、被リンクあてる

AARRRモデルを使ってブログを成長させる?具体例で説明!
AARRRモデルを使ってブログを成長させる?具体例で説明!

こんにちは、結衣です。 PPCからブログの方に本腰を入れ始めたんだけど、リピーターが全然つかないんですよね。 今までのネットビジネスは売って終わ

まだWordPress?オススメのブログ作成ツール7選
まだWordPress?オススメのブログ作成ツール7選

こんにちはゆいです。 今回はウェブサイトを作るならどのツールがおすすめなの? ってのを語ります。 ワードプレスがあればいいんじゃね。 まあ、世間一般

アフィリエイトはWEBマーケティングだ!用語を知って戦略を立てる2
アフィリエイトはWEBマーケティングだ!用語を知って戦略を立てる2

こんにちは、ゆいです 今回も前回に引き続きWEBマーケティング用語について、解説していこうと思います。 2回目となる今回は、コスト関連の用語につ