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();

要素の追加をする場合

//  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内のコンテンツ全てをコピー
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;}

オンラインマニュアル一覧

• ABテストの基本

• 機能紹介