MarketoのデザインスタジオにアップロードされたPDFファイルにDynamic Chatを表示させる方法
MarketoのデザインスタジオにアップされたPDFにDynamic+Chatを表示させる方法
Adobe Developer Console にアクセスし、Adobeのアカウントでログインする
https://developer.adobe.com/console
ヘッダーのメニューの「Projects」をクリックし、反映するプロジェクトをクリックする
Add APIをクリックする
「Document Cloud」 ＞ 「PDF Embed API」を選択する
インストールした「PDF Embed API」を開き、API Keyをコピーして控えておく
Marketoの「デザインスタジオ」にPDFファイルをアップロードする
アップロードしたファイルのURLをコピーして控えておく
ランディングページテンプレートを新規で作成する。
その際の編集モードは「フリーフォーム」を利用する
テンプレートの編集画面で以下を貼り付け、必要部分を修正して保存
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title><link rel="stylesheet" type="text/css" media="all" href="/css/mktLPSupportCompat.css">
<style>
body {background:#fff;}
</style>
</head>
<body style="margin: 0px">
<div id="adobe-dc-view"></div>
<script src="<https://documentcloud.adobe.com/view-sdk/main.js>"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "API Keyを入力", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "デザインスタジオにアップロードしたファイルURLを入力"}},
metaData:{fileName: "ファイルの名称を入力"}
}, {});
adobeDCView.registerCallback(
AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
function (event) {
if (event.type == 'PAGE_VIEW') {
console.log(event);
console.log('Filename=' + event.data.fileName);
console.log('pageNumber=' + event.data.pageNumber);
Munchkin.munchkinFunction('visitWebPage', {
'url': event.data.fileName,
'params': event.data.pageNumber
});
}
},
{
enablePDFAnalytics: true,
}
);
});
</script>
<div class="mktoContent"></div></body>
</html>
先ほど作ったランディングページテンプレートを指定して新規でランディングページを作成する
Dynamic Chatの「JavaScript スニペット」を「ページのMetaタグの編集」から「カスタムHEAD HTML」に入力して保存する
Dynamic ChatでPDFに表示させたいダイアログを開き、 URLに作成したランディングページのURLを入れて公開する
ランディングページURLを開くと、PDFが表示されDynamic Chatが表示されるようになります。
※表示されない場合は、シークレットモードで確認してみてください。
