ONLINE MANUALAPOLLO Optimize オンラインマニュアル
APOLLO OPTIMIZE コードサンプルレシピ
この記事の目的
Apollo OptimizeではJavaScript/CSSコードを使って対象のWebsiteの見た目を変更して、ABテストを行うことができます。この記事では、JavaScript/CSSの初心者向けにいろいろな用途に応じたサンプルコードをご用意しました。(本記事ではそれぞれのコードの解説は行いません)普段のABテスト作成の際の参考にしてください。
基本のJSコードを作る
要素の削除をする場合
削除したい要素のセレクター: #sample_ID
サンプルコード:
// idがsample_IDの要素を取り除く
document.querySelector('#sample_ID').remove();要素の追加をする場合
例１(要素の前に追加)
追加したい要素のセレクター: #sample_ID
追加箇所: 前に追加
コンテンツ(例): <p>added prev content</p>
サンプルコード:
// idがsample_IDの要素を選択し、その要素の前に<p>added prev content</p>を挿入する
document.querySelector('#sample_ID').insertAdjacentHTML('beforebegin', '<p>added prev content</p>');
例2(後に追加)
追加したい要素のセレクター: #sample_ID
追加箇所: 後に追加
コンテンツ(例): <p>added next content</p>
サンプルコード:
// idがsample_IDの要素を取得して、<p>added next content</p>を要素の後に追加
document.querySelector(‘#sample_ID’).insertAdjacentHTML(‘afterend’, ‘<p>added next content</p>’);
例3(子要素の最初に追加)
追加したい要素のセレクター: #sample_ID
追加箇所: 子要素の最初に追加
コンテンツ(例): <p>added prepend content</p>
サンプルコード:
// idがsample_IDの要素を取得して、<p>added prepend content</p>を子要素の最初に追加
const parent = document.querySelector('#sample_ID');
parent.insertAdjacentHTML('afterbegin', '<p>added prepend content</p>');例4(子要素の最後に追加)
追加したい要素のセレクター: #sample_ID
追加箇所: 子要素の最後に追加
コンテンツ(例): <p>added append content</p>
サンプルコード:
// idがsample_IDの要素を取得して、<p>added append content</p>を子要素の最後に追加
const parent = document.querySelector('#sample_ID');
parent.insertAdjacentHTML('beforeend', '<p>added append content</p>');
要素の順番変更
例1(前に挿入)
対象の要素のセレクター: #sample_ID
挿入箇所のセレクター:#sample_insert_ID
挿入箇所:前に挿入
サンプルコード：
// #1 #sample_ID内のコンテンツ全てをコピー
const originalElement = document.querySelector('#sample_ID');
const copiedContents = originalElement.innerHTML;
// #2 #sample_ID要素を削除
originalElement.remove();
// #3 #sample_insert_IDの前にcopiedContentsをペースト
const insertAfterElement = document.querySelector('#sample_insert_ID');
insertAfterElement.insertAdjacentHTML('beforebegin', copiedContents)例2(後に挿入)
対象の要素のセレクター: #sample_ID
挿入箇所のセレクター:#sample_insert_ID
挿入箇所:後に挿入
サンプルコード：
// #1 #sample_ID内のコンテンツ全てをコピー
const originalElement = document.querySelector('#sample_ID');
const copiedContents = originalElement.innerHTML;
// #2 #sample_ID要素を削除
originalElement.remove();
// #3 #sample_insert_IDの後にcopiedContentsをペースト
const insertAfterElement = document.querySelector('#sample_insert_ID');
insertAfterElement.insertAdjacentHTML('afterend', copiedContents)例3(子要素の最初に挿入)
対象の要素のセレクター: #sample_ID
挿入箇所のセレクター:#sample_insert_ID
挿入箇所:子要素の最初に挿入
サンプルコード：
// #1 #sample_ID内のコンテンツ全てをコピー
const originalElement = document.querySelector('#sample_ID');
const copiedContents = originalElement.innerHTML;
// #2 #sample_ID要素を削除
originalElement.remove();
// #3 #sample_insert_IDの子要素の先頭にcopiedContentsをペースト
const insertParentElement = document.querySelector('#sample_insert_ID');
insertParentElement.insertAdjacentHTML('afterbegin', copiedContents);例4(子要素の最後に挿入)
対象の要素のセレクター: #sample_ID
挿入箇所のセレクター:#sample_insert_ID
挿入箇所:子要素の最後に挿入
サンプルコード：
// #1 #sample_ID内のコンテンツ全てをコピー
const originalElement = document.querySelector('#sample_ID');
const copiedContents = originalElement.innerHTML;
// #2 #sample_ID要素を削除
originalElement.remove();
// #3 #sample_insert_IDの子要素の先頭にcopiedContentsをペースト
const insertParentElement = document.querySelector('#sample_insert_ID');
insertParentElement.insertAdjacentHTML('beforeend', copiedContents);要素の変更
例１:画像のsrcの設定
対象となるセレクター：#sample_ID
変更する要素の詳細:画像
画像のURL：https://sample.com.png
サンプルコード：
// #1 idがsample_IDの要素を選択
const targetElement = document.querySelector('#sample_ID');
// #2 要素のsrc属性を変更
if (targetElement) {
targetElement.src('https://sample.com.png');
}例2：テキストを変更
対象となるセレクター：#sample_ID
変更する要素の詳細:テキスト
変更後のテキスト：こんにちわ
サンプルコード：
// #1 idがsample_IDの要素を選択
const targetElement = document.querySelector('#sample_ID');
// #2 要素のテキストコンテントを変更
if (targetElement) {
targetElement.textContent('こんにちわ');
}例3：クラス名を変更
対象となるセレクター：#sample_ID
変更する要素の詳細:クラス属性変更
変更後のクラス属性：change_class
サンプルコード：
// #1 idがsample_IDの要素を選択
const targetElement = document.querySelector('#sample_ID');
if (targetElement) {
// #2 要素のクラス属性を変更
targetElement.className('change_class');
}例4：class 属性を追加
対象となるセレクター：#sample_ID
変更する要素の詳細:クラス属性追加
追加するクラス名：add_class
サンプルコード：
// #1 idがsample_IDの要素を選択
const targetElement = document.querySelector('#sample_ID');
if (targetElement) {
// #2 要素にクラス属性を追加
targetElement.classList.add('add_class');
}例5：placeholderを変更
対象となるセレクター：#sample_ID
変更する要素の詳細:placeholder属性変更
追加するplaceholder：キャラクター名で検索
サンプルコード：
// #1 idがsample_IDの要素を選択
const targetElement = document.querySelector('#sample_ID');
if (targetElement) {
// #2 placeholderのアトリビュートを設定
targetElement.setAttribute('placeholder', 'キャラクター名で検索');
}例6：idを変更
対象となるセレクター：#sample_ID
変更する要素の詳細:id属性変更
変更後のid：change_ID
サンプルコード：
// #1 idがsample_IDの要素を選択
const targetElement = document.querySelector('#sample_ID');
if (targetElement) {
// #2 要素のidをchange_IDに変更
targetElement.id('change_ID');
}例7：その他の属性を変更
対象となるセレクター：#sample_ID
変更する要素の詳細:その他属性変更
変更前の属性: target
変更後の属性：_blank
サンプルコード：
// #1 idがsample_IDの要素を選択
const targetElement = document.querySelector('#sample_ID');
if (targetElement) {
// #2 アトリビュートであるtargetを_blankに変更
targetElement.setAttribute('target', '_blank');
}例8：innerHTMLの変更
対象となるセレクター：#sample_ID
変更する要素の詳細:innerHTML
変更後の要素のinnerHTML：<p class=”sample”>こんにちわ</p>
サンプルコード：
// #1 idがsample_IDの要素を選択
const targetElement = document.querySelector('#sample_ID');
if (targetElement) {
// #2 innerHTMLを変更
targetElement.innerHTML = '<p class="sample">こんにちわ</p>';
}例9：テキストの設定
対象となるセレクター：#sample_ID
変更する要素の詳細:特定箇所をタグ付け
置換の対象となるテキスト: 送料無料
値：<p class=”sample”>こんにちわ</p>
タグづけに使うtag: <span class=”boldText”></span>
サンプルコード：
// #1 idがsample_IDの要素を選択
const element = document.querySelector('#sample_ID');
// #2 要素のinnerHTMLの送料無料を<span class="boldText"></span>で置き換える
element.innerHTML = element.innerHTML.replace(/送料無料/g, '<span class="boldText">送料無料</span>');基本のCSSコードを作る
テキストを変更
例１太字にする
対象となる要素のセレクター:sample_ID
命令:対象のセレクターを持つ要素のテキストを太字にする
サンプルコード:
#sample_ID1{font-weight: bold;}例２【TEXT】下線simple
対象となる要素のセレクター:sample_ID
命令:対象のセレクターを持つ要素のテキストに下線を引く
サンプルコード:
#sample_ID{text-decoration: underline;}例３【TEXT】下線designed
対象となる要素のセレクター:sample_ID
命令:対象のセレクターを持つ要素のテキストにデザイン付きの下線を引く
サンプルコード:
#sample_ID{border-bottom: solid 1px #434343; text-align: center; padding-bottom: 1px; display-inline}例４【TEXT】中央寄せ
対象となる要素のセレクター:sample_ID
命令:対象のセレクターを持つ要素のテキストを中央寄せにする
サンプルコード:
#sample_ID{text-align: center;}
例５【TEXT】色の変更
対象となる要素のセレクター:sample_ID
変更後のテキストの色：red
命令:対象のセレクターを持つ要素のテキストの色を赤にする
サンプルコード:
#sample_ID{color: red;}
例６【TEXT】フォントサイズの変更
対象となる要素のセレクター:sample_ID
変更後のテキストのサイズ：14px
命令:対象のセレクターを持つ要素のテキストのサイズを14pxにする
サンプルコード:
#sample_ID{color: red;}背景の変更
例１ 【BG】背景色の変更
対象となる要素のセレクター:sample_ID
変更後の背景色: red
サンプルコード：
#sample_ID{background: red;}例２ 【BG】余白調整（要素内側）
対象となる要素のセレクター:sample_ID
変更後の要素内側の余白サイズ：10px
サンプルコード：
#sample_ID{padding: 10px;}例３ 【BG】余白調整（要素外側）
対象となる要素のセレクター:sample_ID
変更後の要素外側の余白サイズ：20px
サンプルコード：
#sample_ID{margin: 20px;}例４ 【BG】角丸調整
対象となる要素のセレクター:sample_ID
変更後の角丸度合い：10px
サンプルコード：
#sample_ID{border-radius: 10px;}その他
例１：displayをblockにする
対象となる要素のセレクター:sample_ID
変更後の属性：block
#sample_ID{display: block;}よく読まれている記事
派生データとは何か？ビジネス成功のための活用方法
はじめに 現代のビジネス環境において、データは「新しい石油」とも称されるほど重要な資源となっています。しかし、データ...
MORE
WebサイトのABテストで効果的なクリエイティブとは？
WebサイトのCV数やUI改善には、効果的なクリエイティブの最適化が欠かせません。そのための手法として注目されているのがABテスト...
MORE
クリック解析が無料！ヒートマップツールClarityの徹底ガ...
ウェブサイトの改善には、訪問者の行動を理解することが不可欠です。そのための強力なツールの一つがヒートマップです。ヒートマップは、ユ...
MORE
ABテストは仮説が大事！仮説を立てないとどうなるの？
ABテストは、Webサイトや広告のCV数やCV率を向上させるための手法です。その上で一番大事なことは、『仮説』です。仮説を持たない...
MORE