AMP対応したバリューコマースのLinkSwitchをLuxeritasに導入してみた
アフィリエイトリンクを作成するのに非常に便利ではあるものの、AMPに対応していない為に見送らざるをえなかったバリューコマースのLinkSwitchですが、AMP専用タグの提供が開始されたという事で遅ればせながら当サイトでも導入してみました。
Luxeritasはカスタマイズ用のテンプレートが用意されているので、ごく一般的なWordPressテーマと比べて導入の敷居は低いと思いますが、参考までにという事で当エントリーではその手順を紹介したいと思います。
LinkSwitch（リンクスイッチ）とは
その前にLinkSwitchとはなんぞや？という方はバリューコマース公式サイトにわかりやすい説明がありますので、そちらを参考にしていただけると幸いです。
https://linkswitch.valuecommerce.ne.jp/LuxeritasのLinkSwitch導入手順
基本的にはこちらのページで説明されているほぼそのまんまです。
https://www.valuecommerce.ne.jp/stepup/lksh_stepですが、中には「それってどこに貼ったらいいんですか？」 という方もみえるかと思いますので、そういった点も含めてLuxeritasの場合はここにコピペすればOKですよという感じで説明してみます。
AMP対応には親テーマのheader.phpが必要です
AMP対応が必要無い方はこの項は読み飛ばしていただいて構いません。
AMP対応LinkSwitchを導入する場合は親テーマからheader.phpというファイルをコピーしてくる必要があります。これは現在使用しているバージョンと同じアーカイブファイル（luxeritas-3xxx.zip的な名前のファイル）から用意するのが一番てっとり早いです。既にそのファイルをカスタマイズして利用している方はそこに追記する形になります。
注意点としては今後Luxeritasがアップデートされる度にheader.phpを確認して何かしら修正が入っていた場合はその差分を反映、もしくは最新版のheader.phpを新しくベースとして作成し直すという作業が発生します。header.phpさえ更新されてなければ何もする必要はありません。
それが面倒だという事なら当エントリーで紹介するカスタマイズはスルー推奨です。
もしかしたらheader.phpをカスタマイズしなくて済む方法があるかもしれませんが、私には他にいい方法が思いつかなかったのでひとまずこの方法でやってみました。
基本的にはコピペでOKです
それでは前置きが長くなりましたが作業に入ります。
LinkSwitchタグの設置
まずはLinkSwitchを導入したいWordPressサイトのダッシュボードから > を開いておきます。
バリューコマースの管理画面にログインして > > を開きます。
のコードをコピーします。
WordPressのダッシュボードに戻って先ほど開いておいた子テーマの編集画面からのタブを開いてコードを貼り付けます。
これで</head>の直前にコードが挿入されるようになります。コピペが済んだら保存を忘れないように。
AMP対応が必要無い方はこれだけでLinkSwitchの導入は完了なので、次はLinkSwitchの確認方法へと進んで下さい。
AMP対応LinkSwitchタグの設置
ここからはAMP対応が必要な場合の作業になります。
バリューコマースの管理画面に戻ってのタブを開きます。1.の<head>～</head>内に貼り付けるコードは後回しにして、2.の<body>～</body>内に貼り付けるコードをコピーします。
WordPressのダッシュボードに戻りタブを開いてコードを貼り付けます。このコードも</body>直前がいいようなので、挿入位置のラジオボタンをにして保存します。
次に後回しにした1.の<head>～</head>内に貼り付けるコードですが、これはheader.phpに書く必要があるので先ほど親テーマからコピっておいたheader.phpを編集します。
このコードはAMPページのみ挿入すればいいので（通常ページで読み込んでも実害は無いかもしれませんが）Luxeritas用にちょっと手を加えたコードを貼り付けます。アカウントIDなどは含まれていないので以下のコードをそのままコピペでOKです。
head内に貼り付けるコード（コピペ用）
<?php if( isset( $luxe['amp'] ) ) { ?>
<script async custom-element="amp-link-rewriter" src="https://cdn.ampproject.org/v0/amp-link-rewriter-0.1.js"></script>
<?php } ?>コピペする場所は/headで検索してその直前に挿入します。Luxeritasのバージョン3.6.12のheader.phpだと169行目になるでしょうか。前後の行も入れるとコピペ後はこんな感じになっているはずです。
head内に貼り付けるコード（コピペ位置確認用のサンプル）
?>
<?php if( isset( $luxe['amp'] ) ) { ?>
<script async custom-element="amp-link-rewriter" src="https://cdn.ampproject.org/v0/amp-link-rewriter-0.1.js"></script>
<?php } ?>
</head>
<body <?php body_class(); ?>>編集が済んだらheader.phpをLuxeritasの子テーマのフォルダにアップロードします。ファイルマネージャーでもFTPクライアントでもお好きな方法で構いませんが、ここではアップロードの手順は省略してアップロードが済んだという前提で話を進めさせていただきます。
肝心のそのアップロードのやり方がよくわからない…という方は私が過去に書いたエントリーがお役に立てば幸いです。
https://unlimitedchaos.net/uc/how-to-use-ffftp-upload-and-do...以上でAMP対応LinkSwitchタグの導入は完了です。
あとは通常のリンクタグやブログカードなどでLinkSwitchに対応した提携先サイトのURLを貼り付けるだけで、バリューコマースのアフィリエイトリンクに自動的に変換されるようになります。これに慣れちゃうともう1つずつ手作業でMyLinkを作成するとか正直やってられません…マジな話。
LinkSwitchの確認方法
それでは本当にちゃんと機能してくれるかどうかの確認ですが、LinkSwitchに対応した提携先でなければただのリンクになってしまうのでその点は注意して下さいね？提携先がLinkSwitchに対応しているかどうかは提携先一覧のこの部分を見ればわかるようになっています。
LinkSwitchに対応している事を確認したら、その提携先のサイト内でリンクしたいページのURLをコピーして、投稿や固定ページなどに通常のリンクかブログカードにして貼り付けます。
通常ページの確認は作成したリンクの上にポインタをホバーさせて、URLがdalr.valuecommerce.comから始まっていれば正しく動作しています。
AMPページの場合はワンクッション作業が必要で、まずリンクの上で右クリックメニューを開いたら何もしないでそのメニューを閉じます。その後でリンクの上にポインタをホバーさせて、URLがlsr.valuecommerce.comで始まっていれば正しく動作しています。
以上で動作確認は終了です。
他のアフィリエイトASPにも頑張っていただきたい
バリューコマースのLinkSwitchをLuxeritasに導入する手順の紹介でした。出来ればMyLinkBoxも早々にAMP対応をお願いしたいところです。
他のアフィリエイトASPもこのLinkSwitch的なツールを開発してくれると嬉しいんですけどね。ただ複数のASPに対応している提携先の場合、ちゃんとブロック機能を利用しないと収集つかない事になるかも？という懸念はありますが。
それでは最後になりますが、何となく読んでみたけど実はまだバリューコマース登録してなかったわ…という方はよろしければこちらからどうぞ。