🥓

A8.netトラッキング用タグ設置によるレイアウト崩れへの対処

2022/10/25に公開

CSS

JavaScript

webビーコン

tech

記事タイトルの解決法を知りたくてこの記事を開いた人は A8.net の説明は不要でしょうけど、一応説明しておきます。

A8.net はアフィリエイトプログラム用の Web 計測ツールです。広告主サイトにアクセスが入った際に報酬を払うアフィリエイターを特定するために、自サイトへのアクセスを検出するスクリプトを特定のページに仕込んでおくことで、到達元のアフィリエイターが分かる仕組みになっています。

参考：A8.netのアフィリエイト解説ページ

広告主側の対応としては、以下のように HTML にトラッキング用のタグを設置します。これによって、外部JSの a8sales.js を読み込んで、a8sales() にパラメータを渡すことでトラッキング処理が実行されます。このとき、画面が一部空白になってコンテンツがずれるレイアウト崩れの不具合が起こることがあります。

タグ設置例

<span id="a8sales"></span>
<script src="//statics.a8.net/a8sales/a8sales.js"></script>
<script>

a8sales({
  "pid": "s00000000062001",　//テスト用ID、後日本番IDに変更するため変更不可
  "order_number": "order00023",　//注文番号・現行タグの&so=の値を反映してください
  "currency": "JPY",　//通貨コード、JPY/USD/EURが利用可能
  "items": [　//以下、現行タグの&si=の値を反映してください
    {
      "code": "apple",　//商品コード
      "price": 400,　//商品単価
      "quantity": 2,　//個数
    },
　　{
　　　"code": "apple2",　//商品コード
　　　"price": 500,　//商品単価
　　　"quantity": 1,　//個数
　　},
  ],
  "total_price": 1300,　//全購入商品の合計金額
});
</script>

新トラッキング方式への切替方法について | A8.net より引用

原因は、a8sales() の実行時に  に埋め込まれるWebビーコン画像です。

a8sales()実行後

<span id="a8sales">
  <img src="http://***/***?pid=***" width="0" height="0" border="0">
</span>

この <img> 自身は width height border の指定を見れば分かる通りサイズを持ちませんが、挙動を見る限り、どうも <img> を抱えたことで  にサイズが発生してしまうようです。コード例は割愛しますが、width height に 0 を指定しても改善されませんでした。

そこで、 に絶対配置を指定します。これで、 がいかなる大きさを持とうが他のコンテンツのレイアウトに影響を与えずに済みます。

解決策： に絶対配置を指定

<span id="a8sales" style="position:absolute;"></span>

まとめ

今回は A8.net を取り上げましたが、一般に、レイアウトとは無関係なダミータグの中に通信用の要素を動的に自前で作成したり、そういう仕組みのライブラリを利用したりする際には、ダミータグがレイアウトに影響を与える可能性について留意するとよいでしょう。

まとめ

Discussion