マーケティングブログ
はじめに
Salesforce Marketing Cloud (SFMC) Personalization を使って、初めてポップアップバナーを設定する機会がありました。
今回、「テンプレートを使えば簡単に実装できるだろう」と思って作業を始めたのですが、想定以上にCSSのクセが強く、思わぬ課題に直面しました。この記事では、その検証過程で得られた気づきをご紹介します。
そもそも Personalization とは、ユーザーの属性や行動に応じて Web 上のコンテンツを動的に出し分けられるツールで、ポップアップバナーやレコメンドなどのパーソナライズ施策を簡単に実装できるのが特徴です。
たとえば、新規訪問者と既存顧客で表示するバナーを切り替えたり、過去の閲覧履歴に基づいておすすめ商品を出し分けることができるツールです。
検証を始めたきっかけ
最初は、あらかじめ用意されていた Personalization のテンプレートに自作HTMLを組み込む形で実装を進めていました。
しかし、テンプレートにはすでに多くのCSSが組み込まれており、自作HTMLのデザインが思うように反映されませんでした。
「なぜCSSが効かないのか？」を理解するため、案件とは別に1からポップアップバナーを設定する検証を行うことにしました。
Personalizationの主要コードと役割
検証を進める中で、Personalizationでは以下の4つのコード設定項目が大きな役割を持っていることに気づきました。
このうち、特に重要だったのが Serverside Code です。
CSSが効かなかった原因
当初は「CSS同士の競合」が原因だと考えていましたが、実際にはそうではありませんでした。
Serverside Code 内に「Type: JS」でスタイルを変更する処理が記述されており、その処理が自分の書いたCSSより優先されていたことがわかったのです。
調べていくと、Serverside Code はCDPの属性を利用した条件分岐など、表示内容を切り替えるための設定として利用されており、ここにスタイルを記述すれば条件に応じた動的な表示制御も可能だと理解できました。
つまり、単純にCSSを上書きするだけでは不十分で、Serverside Code の仕組みを理解することが重要だと実感しました。
テンプレートを使わなかった結果わかったこと
ここで、試しにテンプレートを使わずにゼロからポップアップを制作し、Personalization に組み込んでみました。
すると表示自体は問題なくできたものの、クリック率などの計測データが取得されていないことが判明しました。
この経験から、Personalizationのテンプレートには見た目だけではわからない重要なコードやトラッキング処理が多く含まれていることを学びました。そのため、自作HTMLで一から構築する場合は、テンプレートに含まれる仕組みを理解し、慎重に検証する必要があります。
まとめと今後の課題
今回の検証を通じて、Personalizationでポップアップバナーを実装する際は以下の点が重要だと感じました。
今後は、条件による出し分けを行うための Type: JS の書き方や、トラッキングに必要なタグの役割について理解を深め、再現性の高い実装を目指して検証を進めていきたいと考えています。
