資料請求サンクスページをテンプレート化し、お問い合わせエリアをマイトークン化する運用について | Community
Skip to main content
D
due1
October 17, 2022

資料請求サンクスページをテンプレート化し、お問い合わせエリアをマイトークン化する運用について

  • October 17, 2022
  • 1 reply
  • 80 views

資料請求サンクスページをテンプレート化しています。

サンクスページにお問い合わせエリアを用意しております。

お問い合わせ方法は、以下となります。

　・サービス導入相談フォーム

　・E-mail

　・TEL

ただ、資料請求内容によってお問い合わせ先は３つ、２つ、１つとパターンがあります。

そのため、ランディングページテンプレートとマイトークンでうまく運用できるようにしたいです。

 

■やりたいこと

　ページイメージ
　　お問い合わせ先（見出し）

　　フリーテキスト（お問い合わせの誘導メッセージ）
　　・Webフォーム：XXXXXXXXXXXXXXXXX
　　・e-mail：XXXXXXXXXXXXXXXXX
　　・TEL：XXXXXXXXXXXXXXXXX

とよくあるサンクスページの誘導部分になります。

■考えたこと

　デザインスタジオでランディングページのテンプレートを作り、

　構成として、お問い合わせ先の見出し、フリーテキスト（リッチテキストでマイトークン）の場所を固定化しました。

　汎用的にしておきたいフリーテキスト以下を下記のように考えました。

 

　フリーテキスト（リッチテキストでマイトークン）の中を以下で構成しておく。

　　サンプルテキスト（テキストが入りますテキストが入りますテキストが入りますといった文字列）
　　・Webフォーム：{{my.webform}}（テキスト形式のマイトークン）
　　・e-mail：{{my.email}} （テキスト形式のマイトークン）
　　・TEL：{{my.tel}}（テキスト形式のマイトークン）


■課題
　リッチテキストでマイトークンしたもののリッチテキスト内にマイトークンを埋め込むことが

　できない仕様になっている

　

　そのため、テンプレート数をパターン数用意すると、プログラム側でパターン数のプログラムテンプレートを用意する

　しかない、テンプレートの数が多く、運用が煩雑になりかねない


このような問題を解決したいと考えております。

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Naoki_Kumagai
Naoki_Kumagai
Level 3
November 25, 2022

@due1 様

株式会社ルシダスの熊谷です。

 

ご要望について、汲み取りきれているのかわかりませんが、以下、何かのヒントになれば幸いです。

 

【問題点】

リッチテキストタイプのマイトークンの中に、さらにマイトークンを記述して使用することはできない。

 

【解決策（案）】

リッチテキストタイプのマイトークンにするべきところと、テキスト（文字列）タイプのマイトークンでも良いところを切り分けます。

併せて、LPテンプレートの「テキスト要素」内にマイトークンを使用するのは避けて、テキスト（文字列）タイプの「変数」の値にマイトークンを入れるという方法にしてみてはどうでしょうか？

 

LPテンプレート ソース例

 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta class="mktoString" mktoName="ページの見出し" id="headLine" default="{{my.headline}}"> <meta class="mktoString" mktoName="フリーテキスト" id="freeText" default="{{my.freetext}}"> <meta class="mktoString" mktoName="Webフォーム リンク" id="webformLink" default="{{my.webform}}"> <meta class="mktoString" mktoName="email リンク" id="emailLink" default="{{my.email}}"> <meta class="mktoString" mktoName="TEL リンク" id="telLink" default="{{my.tel}}"> <title></title> <style> body {background:#fff;} </style> </head> <body> // ページの見出し // <h1>${headLine}</h1> // フリーテキスト部分 // <div>${freeText}</div> // 各種お問い合わせリンク先 // <div> <ul> <li>Webフォーム：<a href="https://${webformLink}">https://${webformLink}</a></li> <li>e-mail：<a href="mailto:${emailLink}">${emailLink}</a></li> <li>TEL：<a href="tel:${telLink}">${telLink}</a></li> </ul> </div> </body> </html>

 

 

上記LPテンプレートをもとにしたLPアセットの編集画面の様子

 

LPアセットをプレビューした様子 （※マイトークンは別途で作成済み スクショ割愛）

 

いかがでしょうか？

Terms & ConditionsAccessibility statement

Loading footer...