MAツールで公開するLP制作の罠｜MAツール「Pardot」でハマった3つの落とし穴
スマートキャンプデザインブログ、デザイナーの高松です。
突然ですが皆さん、MAツールを使用したことはありますか？
最近ではMAツールが流行っており、弊社でも「SalesForce Pardot」を利用しています。
先日、初めてMAツールの管理画面からLP（ランディングページ）を公開したところ、通常のLP公開とは異なる注意点がありました。
この記事では私がハマった落とし穴とその解決方法について解説します。
MAツール上でLP公開するに至った経緯
今年の2月に、スマートキャンプでは法人向けSaaSの比較・検索サイト「BOXIL（ボクシル）」と関連メディアのPV数を活用した広告商品「BOXIL Ads（ボクシルアド）」を作ることになりました。
その紹介ページとして実際に公開したものがこちらです。
このLP制作を社内で依頼され、私がデザイン〜コーディングまでを担当することに。依頼内容には「MAツールを使いたいから、よろしく！」との一言が入っていました。
MAツールとは
見込み顧客管理の多くを自動化し、マーケティング活動の手助けを実現するツール。MAはMarketing Automationの略。
MAツール（Pardot）でLPを公開するメリット
LP制作には集客、周知、購買......など様々な目的があります。
「どうしたら成果の出るLPになるのか」とデザイナーは頭をひねるわけですが、数字のフィードバックより確かなものはないかと思います。
オンラインであれば、Google Analyticsやヒートマップツールなどを導入し、CVRや離脱率を計測できるので利用しているところも多いのではないでしょうか。
CVR（Conversion Rate）とは
流入したユーザーに対し、CV（コンバージョン）したユーザーの割合
CV（コンバージョン）とは
購入や問い合わせなど、ユーザーにとって欲しいアクション（成果地点）
しかし、問い合わせ増加を目的とするLPには、成果地点がオンラインにないものもあります。（架電など）
その際にMAツールと連携しておくと顧客情報や行動ステータスをオフラインまで一元的に管理できるため、よりよいマーケティング活動に繋げることが可能というわけです！
ただし、MAツールを使ってLPを公開する場合には制作者として気をつけておきたいことがいくつかあります。
今回はいくら調べても答えにたどりつけなかったものも記載していきますので、同じ問題に出会った人に、このnoteが届くことを願っています。
（◉(届)◉）／~~
【MAの罠1】 OGPを読みにきたTwitter botがMAツールに閉め出される
公開に合わせてOGPを設定し、デバッガーで確認を行うのはLP公開時のルーティンかと思いますが、思わぬところで問題が起きました。
TwitterだけOGPが表示されない。
助けてくれ。
OGPにはいくつかデバッガーが存在しますが、Twitterのデバッガーでエラーが出続けていました。
SNSデバッガー
Facebook : https://developers.facebook.com/tools/debug/?locale=ja_JP
Twitter : https://cards-dev.twitter.com/validator
▼表示されていたエラーメッセージ
WARN: The image URL（hogehoge） specified by the 'twitter:image' metatag may be restricted by the site's robots.txt file, which will prevent Twitter from fetching it.要約すると
「OGP画像を読みに行ったTwitter botが『robots.txt』という設定ファイルに閉め出されて画像を読み込みに行けません！」
ということらしいですが、LP公開にMAツールを使用していたことが原因にありました。
今回は、HTMLファイルをMAツールの管理画面から入稿する必要があり、使用している画像データはMAツールのストレージにアップロードし、画像リンクを生成していました。
OGPの表示にはこのリンクを読み込みに行く必要がありますが、MAツールにアップロードした画像リンクを設定していたために、Twitterだけ受け入れてもらえなかったようです。
試しに、画像の格納先を別のストレージに変更し、画像リンクを直したら...
表示された！！（感涙）
原因がわからず、周りのエンジニアさんに助けを求めた末に解決できました。1人では、エラーメッセージが読めない時点で心が折れていたと思います。
【MAの罠2】上書きしたLPデータは復旧できない
公開後のLPで、手直しやアップデートが発生することは珍しくないので、アップデート前後のデータを管理しておくことは大切ですよね。
普段であればGitHubなどでアップデートを蓄積していけばいいのですが、MAツール（Pardot）で公開設定を行っていたところ、私の不注意で落とし穴に...。
過去に公開していたLPデータの上に、入稿したいデータを上書き保存してしまう失態をおかしました。
しばらくして「何かがおかしい」と気づいた時には、過去のLPの内容はすっかり書き換わっており、ブラウザの「戻る」連打でも変更前の内容は戻りませんでした。
過去に公開したデータがどこかに保存されていないか探しまくっても、どこにもありません。
（Pardotに限らずMAツールはコード管理する機能はないので当たり前ですね。）
顔面蒼白になりながら、自分のローカルフォルダを漁った結果、参考用にダウンロードしていた過去のLPデータが出てきました。
涙目でLPを復旧しながら、「どんなツールでLP公開するとしても、全てをGitHubに集約する」ことを心に決めました。
【MAの罠3】 プレビューですべての挙動は確認できない
PardotではHTMLを入稿すると、公開前に確認のプレビューができる機能がついています。
ある程度データができたので仮入稿し、プレビューしてみると、
「あれ？挙動おかしいな...。」
ローカルで確認した時は動いていたheaderの表示切り替えやその他の挙動が、プレビューだとなんだか変です。色々探ってみても原因がわかりません。
結局よくわからず試しに本公開してみたら動きました。
解決策を期待していた方、力技みたいな結論ですみません。管理画面上ではプレビューできるものが限られていたようで、ローカルで確実に動くことを確認した上で公開したら問題なく動いてくれました。
先輩デザイナーの葉栗さんに「試しに公開しちゃえば？」と言われ、その通りにしたら事なきを得ました。ビビってばかりではダメですね...。
おまけ. AdBlockによるclassの削除
最後はMAツールとは離れますが、広告関係のLPを作る人には気をつけて欲しいTipsです。
LP公開後、先輩デザイナーの森重さんからこんなメッセージが。
なんで！！！！！！！！！
自分の周りにはレイアウト崩れが起きる人と起きない人が現れ、頭が沸騰しそうになっていたところ、広告業界出身のエンジニアさんから鶴の一声が。
「AdBlock、いれてません？」
AdBlock（アドブロック）とは
広告をブロックするウェブブラウザの拡張機能
"sponsor" "ad" "advertising" など広告をイメージする用語をCSSのclass名に使用するとAdBlockにブロックされてしまうんだとか。
知らなかった...。私も前職、広告業界なんですけど...。
これはGhosteryなどのウェブサイトトラッカーでも起きる事象のようですので、制作の時点で気をつけておきたいですね。
class名を修正したら直りました！
デザイナーだってMAツールと仲良くしたい
ここまで書くと「普通にLP公開できたら楽だったね。」という結末になりそうですが、そうではなく、デザイナーも関係者が効果計測をしているツールに普段から慣れ親しんでおくべきだと痛感した、というお話でした。
デザインは目的達成を叶える手段のひとつであり、その効果は様々なツールとの連携や、施策への正しい理解によって大きくすることができます。
すべてのツールを理解して使いこなすことは難しいですが、LP公開に関わる設定や簡単なレポートの作成方法については、余裕がある限り確認しておくといいことがたくさんありそうですね。
このようなデザイナーにとってまだネットに落ちていない情報や発見については、本ブログなどを通して、発信していければと思っています。
引き続きスマートキャンプのデザインブログをよろしくお願いします！
デザイナーインターンも募集しています！
WRITER：Yume Takamatsu ( SMARTCAMP / Designer / @dream_yt95 )
EDITOR : Yuta Morishige ( SMARTCAMP / Designer / @MorishigeYuta )
あなたのサポートがデザインブログ更新の意欲になります！いただけたらブログの中で恩返しできればと思います！