追尾広告が追尾しない件

[まぐまぐ]

こんばんは。
お世話になっています。
simplicity1.9.3を利用しています。

標準機能で付いている追尾広告が機能しなくなったため対処方法があればよろしくお願い致します。

内部リンクをクリックすると別枠で立ち上がるPOP広告の依頼を受けて設定しました。

footer-insert.phpの一番下に追記しました。

これによってPOP広告は機能しています。
ただPC画面で右サイドバーの追尾広告が表示されるのですが、追尾がされなくなりました。
これの対処方法がありましたらよろしくお願い致します。

[まぐまぐ]

script type="text/javascript" src="http://js.octopuspop.com/pu-jq.js"></script>

script type="text/javascript">
pu(00000);
/script>

上のコードを貼り付けています。
<を書くとエラーで書き込めなかったため<を外しています。

[まぐまぐ]

広告の依頼主にコードを変えてもらう方法しかありませんか？

[hidekichi]

> footer-insert.phpの一番下に追記しました。

ここが怪しいです。
jQueryが読み込まれる前にその何かしらのスクリプトが動作していたり、読み込みの順序がおかしなことになっている可能性があるので、まず確認としては、デベロッパーツールのコンソールで何かしらjQueryが読み込まれていない等のエラーがでていないかどうかを確認してみてください。

通常、現在のwordpressではスクリプトをwp_enqueue_script()と言う関数で読み込みます。これは読み込みのキューをwordpressに知らせて、jQueryが必須なスクリプトの場合、jQueryが読み込まれてから該当のスクリプトを読み込みように順番待ちさせるものです。

直接スクリプトタグで書き込むと、これら順番待ちのスクリプトよりも早い段階で読み込まれてしまい、その後にjQueryが読み込まれてしまう可能性があります。なので、これが原因だとしたら、子テーマfunctions.phpに、

function add_script_何かしらの名前() {
  $script_address = "http://js.octopuspop.com/pu-jq.js";
  wp_enqueue_script("ハンドル名", $script_address, array("jquery"), "20161007", true);
}
add_action('wp_enqueue_scripts', 'add_script_何かしらの名前');

こう書けばスクリプトがjQueryが読み込まれた後に読み込まれます。ここで問題がpu(00000);この部分ですが、これが表示するために必要な場合、どのタイミングで表示するかなどがありますが、例えば、

(function($){
  $(window).on("load", function(){
    pu(00000);
  });
})(jQuery);

として、ウィンドウが読み込まれてから表示するか、もっと速く表示する必要があれば、先程の子テーマfunctions.phpに追記したものに付け加える形で、予め、

(function($){
  $(function(){
    pu(00000);
  });
})(jQuery);

これだけ書いたtest_script.jsを子テーマのlibディレクトリ(なければ作成)にアップロードしておいて、

function add_script_何かしらの名前() {
  $script_address = "http://js.octopuspop.com/pu-jq.js";
  $show_script = get_template_directory_uri() . "/lib/test_script.js";
  wp_enqueue_script("ハンドル名a", $script_address, array("jquery"), "20161007", true);
  wp_enqueue_script("ハンドル名b", $show_script, array("jquery","ハンドル名a"), "20161007", true);
}
add_action('wp_enqueue_scripts', 'add_script_何かしらの名前');

こんな感じで書けば、jQueryとハンドル名aのスクリプトが読み込まれてから該当のスクリプトが読み込まれるため、読み込み順の問題が無くなります。
ちなみに、function add_script_何かしらの名前()とadd_action(‘wp_enqueue_scripts’, ‘add_script_何かしらの名前’);にある何かしらの名前は任意でつけてください。例えば

function add_script_adsTest() {
  //  ...略...
}
add_action('wp_enqueue_scripts', 'add_script_adsTest');

こんな感じにして、同様に、ハンドル名aとハンドル名bも任意の名前をつけてください。例えば、

ハンドル名a → pu-jq-js
ハンドル名b → pu-jq-show-js

こんな感じに付け替えて、$show_script, array("jquery","pu-jq-js") こんな感じにします。

まぐまぐさんのサイトがhttpのサイトであればこのままでも良いですが、httpsのサイトな場合、混在するコンテンツになってしまう可能性があるので、その場合は、

$script_address = "//js.octopuspop.com/pu-jq.js";

このようにスキームを外してしまえばよいかと思います。

他に考えられる問題として、もし仮に、get_template_directory_uri()が返すアドレスの後ろにスラッシュが入っている場合、サイトアドレス/子テーマのディレクトリ//lib/...になってしまう可能性があるので、その場合は、スクリプトがサイトを表示の際に読み込まれません。これらはデベロッパーツールでフッター付近で読み込まれているスクリプト名を見て確認できます。

正しいアドレスで読み込まれていればハンドル名aのものは読み込まれますし、ハンドル名bはjQueryとハンドル名aが読み込まれていれば読み込まれると思います。

僕がいまいち何しているのかわからないのがpu(00000);で、これを入れたらここに広告が入るのか、それとも読み込み用の何かしらのidとかそのあたりなのかが不明なのでこれが正しい形と言うのは具体的にはかけませんが、読み込み順が正しく、かつその処理の方法も正しければ、追従部分(他のjQuery部分)と共存しても問題はないかと思います。

[まぐまぐ]

お返事ありがとうございます。
上記の方法で色々試してみても解決できなかったです。

補足です。

・サイトはhttpです。

・タグは「締めbodyの上」に置くように言われたためfooter-insert.phpに追記しました。

・PU(00000):に関しては、各サイトごとにIDが割り振られています。
サイトを識別するためのIDのようです。

・デベロッパーツールの結果です。
広告コードを載せた状態での結果です。
今回教えていただいた方法をおこなう前から出ていました。

javascript.js:4 Uncaught TypeError: jQuery is not a function(anonymous function) @ javascript.js:4

javascript.js:5 Uncaught TypeError: jQuery is not a function(anonymous function) @ javascript.js:5

htmlerrorchecker.js:1Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

色々と複雑そうです。
直接テーマと関係なさそうな問題で申し訳洗いません。
難しいのであれば諦めます。

[hidekichi]

javascript.js:4 Uncaught TypeError: jQuery is not a function(anonymous function) @ javascript.js:4
のｊavascript.jsがどれかにもよりますが、これよりも前にjQueryが読み込まれていないのがまず原因です。
おそらくｊavascript.jsの4行目に$(なんちゃら)とjQueryが利用されているにも関わらず、それより前にjQueryが読めていないと言うことです。

どうすれば直るかは、jQueryを真っ先に読み込めば直りますが、どういう原因で読み込めていないかは質問の内容からだけではわかりません。通常、前レスで書いたように、各scriptがjQueryに依存する形で、jQueryを読み込んでからそれぞれを読み込むようにしてあればこのようなことは起こらないわけです。

原因の1つとして、jQuery等にはasync/deferいずれかがついていないのに、他のスクリプトタグにasync/defer等がついていて、順番がおかしくなっていると言うのも考えられます。

> タグは「締めbodyの上」に置くように言われたため
> footer-insert.phpに追記しました。

これの理由としては、htmlが読み込まれてからそのスクリプトが動作するようにと言うことかと思いますが、基本的にはjQueryが読み込まれていればその後ならどこでも大丈夫なんです。そのために、jQueryはドキュメントレディやウィンドウ・オンロードなどの指定ができて、読み込むタイミングを指定できます。

特にjQueryの後に読むスクリプトにdeferがついていれば、どうやってもDOM解析後にそのスクリプトを読み込みます(遅延読み込み)。これはつまりはfooter手前で読むのと同じことです。ただし、jQueryに何もついていない場合は、jQueryが読み込む前にそのスクリプトが読み込まれる可能性もありますので、順番が保証されるわけではありません。
asyncは読み込めるようになったら読み込むので、それ単体で動作するスクリプトしかつけてはいけません。例えばGoogleの広告とかアナリティクスとかそういうやつですね。

async/deferいずれもついていない場合は、例えばheadでjQueryを読み込んで、閉じbodyあたりでそれぞれのスクリプトを読めばhtmlにしろcssにしろ他のスクリプトにしろ上から読み込んでいきますから順番が保証されます。

で、footerあたりのスクリプトを読み込んでいる部分を見て、deferなりがついていないかをまず確認してみてください。

少し前のアップデートで親テーマfunctions.phpに、

if ( !function_exists( 'defer_async_scripts' ) ):
function defer_async_scripts( $tag, $handle, $src ) {

  //var_dump($handle);
  // The handles of the enqueued scripts we want to defer
  $async_defer = array(
    //とりあえず影響が計り知れないのでコメントアウト
    // 'jquery-core',
    // 'jquery-migrate',
  );
  $async_scripts = array(
    'comment-reply',
    'lity-js',
    
  );
  $defer_scripts = array(
    'jquery',
    'admin-bar',
    'simplicity-js',
    'simplicity-child-js',
    'jquery-lazyload-js',
    'crayon_js',
    'lightbox-js',
    'jq-migrate-js',
    'skins-javascript-js',
  );
    if ( in_array( $handle, $async_defer ) ) {
        return '＜script src="' . $src . '" async defer></script>' . "\n";
    }
    if ( in_array( $handle, $defer_scripts ) ) {
        return '＜script src="' . $src . '" defer></script>' . "\n";
    }
    if ( in_array( $handle, $async_scripts ) ) {
        return '＜script src="' . $src . '" async></script>' . "\n";
    }

    return $tag;
}
endif;
add_filter( 'script_loader_tag', 'defer_async_scripts', 10, 3 );

※403で投稿できないので一部全角＜が入っています。

こういうのが入っていると思います。内容はうちのやつのコピペなのでまぐまぐさんのものとは違うかも知れませんが、うちはこれで基本的なエラーはでてません(利用しているスクリプト・プラグインにもよります)。
もし、$async_scriptsや、$defer_scriptsに何かしら書いてあってそれが問題であれば、

$defer_scripts = array(
   // 'jquery',
   // 'admin-bar',
   // 'simplicity-js',
   // 'simplicity-child-js',
   // 'jquery-lazyload-js',
   // 'crayon_js',
   // 'lightbox-js',
   // 'jq-migrate-js',
   // 'skins-javascript-js',
  );

例えばこんな感じに全てコメントアウトしてみてください。そうすればこれらにはdeferなりasyncはつきません。真っ白になったりした場合は、

//add_filter( 'script_loader_tag', 'defer_async_scripts', 10, 3 );
ここをコメントアウトしても良いです。

asyncやdeferが入ればページの読み込み速度が速くなったように感じれます。遅延読み込みの場合は結局後で読み込むので速くなったように思うだけでたいして変わりませんが、それでもレンダリングブロックは解消されるので速くなると思います。
問題点としては、この関数が動作している時に、他の想定していないスクリプトが読み込まれたした場合(今回ので言う所のfooter-insert.phpに直スクリプトタグで読み込み等)に、それらにはasync/deferがついていないので読み込み順がおかしくなる場合があると言うことです。

#45910で書いたenquequeで読み込む方法の場合、スクリプトにハンドル名がつけられます。このハンドル名を$defer_scriptsに入れれば、jQueryが読み込まれた後にかつdeferがついて動作するようにできますが、まずは上記のコメントアウトで、jQuery(とその他のスクリプト)が正しく読み込めるようにするのが先決です。

その上で、他にjavascript.jsやその他にエラーがないかどうかを確認して問題がなくなった時にはじめてdeferなりasyncをつける事ができる準備ができたと言うことになります。

このdefer/asyncをつける作業にはプラグインで読み込まれているスクリプトも含めそれらのハンドル名が必須です。なので、それらがわからない場合は使用しないほうが良いです。もしするのであれば、wordpressで読み込まれているjavascriptにdeferもしくはasyncをつける からハンドルを表示するプラグインをダウンロード・インストールして有効にした後ハンドル名を調べて、作業してください。

[七不思議]

POPと追尾をサイトに導入した経験があるので、記載いたします。
恐らく、原因となっているPOPのタグがjQueryなのが追尾型広告を稼働させなくしている原因かと思われます。
POPのjsを js.octopuspop.com/pu-jq.js → js.octopuspop.com/pu.js に変更することで解決するかと思います。
※ただし導入している何かしらのプラグインが原因の場合は他の原因が考えられます。

お試しくださいませ！

[投稿者]

投稿