hiking93/dcard-mopub-tools.html

## dcard-mopub-tools.html
<!DOCTYPE html>
<html lang="zh-Hant">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Dcard MoPub 工具集</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-pink.min.css" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" />
	<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
	<style>
		body {
			font-family: 'Roboto', 'Noto Sans CJK TC', 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', sans-serif;
		}

		code {
			font-family: 'Roboto Mono', 'Noto Sans Mono CJK TC', monospace;
			background-color: #eee;
		}

		.mdl-layout__drawer {
			width: 320px;
			-webkit-transform: translateX(-320px);
			transform: translateX(-320px);
		}

		.page-content {
			padding: 16px;
			max-width: 800px;
			margin: 0 auto;
		}
		#native-browser-input {
			font-family: 'Roboto Mono', 'Noto Sans Mono CJK TC', monospace;
		}

		#native-browser-output {
			font-family: 'Roboto Mono', 'Noto Sans Mono CJK TC', monospace;
			padding: 16px;
			background-color: #eee;
			border-radius: 4px;
			word-break: break-all;
		}
	</style>
	<script>
		var macros = ["%eaid!",
			"%%ADUNITID%%",
			"%%BUNDLE%%",
			"%%CACHEBUSTER%%",
			"%%CLICK_URL_ESC%%",
			"%%CLICK_URL_UNESC%%",
			"%ecid!",
			"%%DEST_URL_ESC_ESC%%",
			"%%DEST_URL_ESC%%",
			"%%DEST_URL%%",
			"%eudid!",
			"%%DNT%%",
			"%%IPADDRESS%%",
			"%%KEYWORDS%%",
			"%%KEYWORD:\\[.+\\]%%",
			"%%LATITUDE%%",
			"%%LONGITUDE%%",
			"%%PLACEMENTID%%",
			"%%REQUESTID%%",
			"%%USERAGENT%%"]

		function generateNativeBrowserUrl() {
			var originalUrl = document.getElementById("native-browser-input").value
			var result
			if (originalUrl.length === 0) {
				result = "你沒有輸入廣告點擊網址";
			} else {
				var regex = new RegExp("(?:" + macros.join("|") + ")", "g")
				var macroMatches = originalUrl.match(regex)
				var encodedUrl = encodeURIComponent(originalUrl)
				if (macroMatches) {
					macroMatches.forEach(function (macroMatch) {
						var encodedMacroMatch = encodeURIComponent(macroMatch)
						encodedUrl = encodedUrl.replace(encodedMacroMatch, macroMatch)
					});
				}
				result = "mopubnativebrowser://navigate?url=" + encodedUrl
			}
			document.getElementById("native-browser-output").innerHTML = result
		}
	</script>
</head>

<body>
	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
		<header class="mdl-layout__header">
			<div class="mdl-layout__header-row">
				<span class="mdl-layout-title">Dcard MoPub 工具集</span>
			</div>
		</header>
		<div class="mdl-layout__drawer">
			<span class="mdl-layout-title">Dcard MoPub 工具集</span>
			<nav class="mdl-navigation">
				<a class="mdl-navigation__link" href="#">版本 0.0.1</a>
			</nav>
		</div>
		<main class="mdl-layout__content">
			<div class="page-content">
				<h3>使用原生瀏覽器</h3>
				<p>
					若是 MoPub SDK 內建的瀏覽器導致網頁內容運作不正常，使用 <code>mopubnativebrowser</code> 編碼過的連結，可以讓廣告點擊改為用原生瀏覽器開啟。
					<a href="https://developers.mopub.com/docs/ad-formats/native-browser-clicks/">MoPub 官方文件</a>
				</p>
				<div style="display: flex; align-items: center">
					<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="flex-grow:1;">
						<textarea id="native-browser-input" class="mdl-textfield__input" type="text" rows="3"></textarea>
						<label class="mdl-textfield__label" for="native-browser-input">輸入廣告點擊網址</label>
					</div>
					<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" style="margin-left:16px;" onclick="generateNativeBrowserUrl()">產生原生瀏覽器網址</button>
				</div>
				<div id="native-browser-output">產生的網址將出現在這裡</div>
		</main>
	</div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="zh-Hant">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Dcard MoPub 工具集</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-pink.min.css" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto\|Roboto+Mono" />
	<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
	<style>
	body {
	font-family: 'Roboto', 'Noto Sans CJK TC', 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', sans-serif;
	}

	code {
	font-family: 'Roboto Mono', 'Noto Sans Mono CJK TC', monospace;
	background-color: #eee;
	}

	.mdl-layout__drawer {
	width: 320px;
	-webkit-transform: translateX(-320px);
	transform: translateX(-320px);
	}

	.page-content {
	padding: 16px;
	max-width: 800px;
	margin: 0 auto;
	}
	#native-browser-input {
	font-family: 'Roboto Mono', 'Noto Sans Mono CJK TC', monospace;
	}

	#native-browser-output {
	font-family: 'Roboto Mono', 'Noto Sans Mono CJK TC', monospace;
	padding: 16px;
	background-color: #eee;
	border-radius: 4px;
	word-break: break-all;
	}
	</style>
	<script>
	var macros = ["%eaid!",
	"%%ADUNITID%%",
	"%%BUNDLE%%",
	"%%CACHEBUSTER%%",
	"%%CLICK_URL_ESC%%",
	"%%CLICK_URL_UNESC%%",
	"%ecid!",
	"%%DEST_URL_ESC_ESC%%",
	"%%DEST_URL_ESC%%",
	"%%DEST_URL%%",
	"%eudid!",
	"%%DNT%%",
	"%%IPADDRESS%%",
	"%%KEYWORDS%%",
	"%%KEYWORD:\\[.+\\]%%",
	"%%LATITUDE%%",
	"%%LONGITUDE%%",
	"%%PLACEMENTID%%",
	"%%REQUESTID%%",
	"%%USERAGENT%%"]

	function generateNativeBrowserUrl() {
	var originalUrl = document.getElementById("native-browser-input").value
	var result
	if (originalUrl.length === 0) {
	result = "你沒有輸入廣告點擊網址";
	} else {
	var regex = new RegExp("(?:" + macros.join("\|") + ")", "g")
	var macroMatches = originalUrl.match(regex)
	var encodedUrl = encodeURIComponent(originalUrl)
	if (macroMatches) {
	macroMatches.forEach(function (macroMatch) {
	var encodedMacroMatch = encodeURIComponent(macroMatch)
	encodedUrl = encodedUrl.replace(encodedMacroMatch, macroMatch)
	});
	}
	result = "mopubnativebrowser://navigate?url=" + encodedUrl
	}
	document.getElementById("native-browser-output").innerHTML = result
	}
	</script>
	</head>

	<body>
	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
	<header class="mdl-layout__header">
	<div class="mdl-layout__header-row">
	<span class="mdl-layout-title">Dcard MoPub 工具集</span>
	</div>
	</header>
	<div class="mdl-layout__drawer">
	<span class="mdl-layout-title">Dcard MoPub 工具集</span>
	<nav class="mdl-navigation">
	<a class="mdl-navigation__link" href="#">版本 0.0.1</a>
	</nav>
	</div>
	<main class="mdl-layout__content">
	<div class="page-content">
	<h3>使用原生瀏覽器</h3>
	<p>
	若是 MoPub SDK 內建的瀏覽器導致網頁內容運作不正常，使用 <code>mopubnativebrowser</code> 編碼過的連結，可以讓廣告點擊改為用原生瀏覽器開啟。
	<a href="https://developers.mopub.com/docs/ad-formats/native-browser-clicks/">MoPub 官方文件</a>
	</p>
	<div style="display: flex; align-items: center">
	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="flex-grow:1;">
	<textarea id="native-browser-input" class="mdl-textfield__input" type="text" rows="3"></textarea>
	<label class="mdl-textfield__label" for="native-browser-input">輸入廣告點擊網址</label>
	</div>
	<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" style="margin-left:16px;" onclick="generateNativeBrowserUrl()">產生原生瀏覽器網址</button>
	</div>
	<div id="native-browser-output">產生的網址將出現在這裡</div>
	</main>
	</div>
	</body>

	</html>