注:Tangiblee ではこのオプションはお勧めしません。
私たちの経験に基づいて、お勧めします マネージド・インテグレーション セミマネージド統合では、新しいデプロイメントやページレイアウトが変更されるたびに、開発チームがTangibleeの機能の互換性を確認する責任を負う必要があるためです。
マネージド・インテグレーションを通じて、Tangiblee は QA を実施し、Tangiblee の CTA とモーダルがお客様の継続的な変更やデプロイメントに確実に従うようにする責任を負います。ただし、Tangiblee に通知する必要があることに注意することが重要です (success@tangiblee.com) 現在進行中の製品レイアウトページやリプラットフォームの変更で、当社が注意すべき点がある場合。そうでない場合は、その変更は本番環境にデプロイされて初めてページに表示され、これらの変更を反映するようにマッピングを更新するまでTangiblee CTAは表示されません。
このオプションを使用して、Tangiblee チームはマッピングコード (別名) の初期実装を開発します。 tangiblee-mapper.js）TangibleeをWebサイトのPDPレイアウトと構造に合わせて調整します。
セミマネージド統合は次の 2 つのコードブロックで構成されます。
- マッピングコード (tangiblee-mapper.js)
- タンジブル API コード (tangiblee.min.js)
<head><body>Tangiblee では、そのタグを他の Javascript タグがページに追加されているのと同じ場所に配置することを推奨しています。つまり、or セクションの末尾であってもかまいません。Tangiblee は、以下の点を考慮して GTM のインストールを推奨していません。 IOS17の最新のアップデート。
お客様の IT チームがインストールします tangiblee-mapper.js タグとして使うことも、ファイルとしてホストしてウェブサイトに直接追加することもできます。今後は、IT 部門が全面的に管理できるようになります。 tangiblee-mapper.js Tangibleeをカスタマイズしたり、必要に応じてPDP構造の変更に応じて更新したりします。カスタマイズできる内容の詳細については、こちらをご覧ください。 tangiblee-mapper.js にあります API イントロダクション API ドキュメンテーションセクションの記事。
[.良い]重要: をインストールする前に tangiblee-mapper.js SKU IDセレクターが正しく、PDP構造と一致していることを確認してください。不一致がある場合は、アカウントマネージャーにできるだけ早く連絡して修正してください。[.good]
Tangibleeをさまざまな構成（STG、PRDなど）のさまざまな環境にインストールする必要がある場合は、次のように複製してください tangiblee-mapper.js 設定を変更して更新します。次の 2 つの例を次に示します。 tangiblee-mapper.js さまざまな構成をサポートします。また、カスタマイズの可能性についても詳しく説明します tangiblee-mapper.js にあります API イントロダクション API ドキュメンテーションセクションの記事。
単一SKU (標準)-セミマネージド統合
これがセミマネージド統合の例です。一般的なセミマネージドサンプルPDP。
ザの tangiblee-mapper.js マネージド・インテグレーション・サンプル PDP に似ていますが、Tangiblee CDN から読み込むのではなく、Tangiblee によって作成され、PDP で直接ホストされます。
[.good] Tangiblee CDN に対しては汎用 Tangiblee API 呼び出しのみが実行されます。つまり、Tangiblee CDN へのラウンドトリップを節約して、Tangiblee CDN を読み込む必要がなくなります。 tangiblee-mapper.js. [.良い]
以下は、のサンプルコードです tangiblee-mapper.js スクリプトには以下のプロパティが設定されています。
- PDP 上の単一の SKU
- 1 つのアクティブなロケール
- 価格/通貨/ATC ポップアップなし
- オーダートラッキングなし
<!-- tangiblee-mapper.js code placed in a <script> tag -->
<script>
(function(){
// helper function containing the code
// that injects the demo CTA.
// this code should be replaced with a
// real CTA injecting for a given PDP
var showTangibleeCta = function(ctaThumbs) {
var ctaClassName = 'tangiblee-shopify-cta',
ctaContainer = document.getElementById('ProductThumbs'),
cta = document.getElementsByClassName(ctaClassName)[0];
if (cta) {
cta.style.display = 'block';
} else {
if (ctaContainer) {
var li = document.createElement('li');
li.className = 'grid__item small--one-third medium-up--one-third';
var btn = document.createElement('button');
btn.className = 'product-single__thumbnail ' + ctaClassName;
btn.style.border = '1px solid #333';
btn.style.padding = '0';
btn.style.margin = '0';
btn.style.backgroundColor = '#fff';
btn.style.width = '76px';
btn.style.height = '76px';
btn.style.fontSize = '1.4em';
btn.style.fontWeight = 'bold';
btn.style.lineHeight = '1.1em';
btn.style.textAlign = 'center';
btn.innerText = 'Will It Fit?';
li.appendChild(btn);
ctaContainer.appendChild(li);
}
}
return ctaClassName;
};
window.tangiblee = window.tangiblee ||
function() {
(tangiblee.q = tangiblee.q || []).push(arguments);
};
tangiblee('domain', 'www.tangiblee-integration.com');
tangiblee('useCookies', true);
tangiblee('showCTA', showTangibleeCta);
tangiblee('startOnSKUs', ['2275915']);
})();
</script>
<!-- generic Tangiblee API - tangiblee.min.js - code placed in a <script> tag -->
<script async src="https://cdn.tangiblee.com/integration/3.1/tangiblee.min.js"></script>
[.悪い]ご注意: これはインテグレーションスニペットではなく、このガイドのための一例です。Tangiblee の担当者は、オンボーディングプロセス中に Web サイト専用の統合スニペットを共有します。[.bad]
PDP上の複数のSKU-セミマネージド統合
この例では、より複雑なことがわかります tangiblee-mapper.js PDP上の複数のSKUのユースケースを処理します。また、オーダートラッキングなど、より多くの具体的な機能が設定されています。
で使用できるカスタマイズオプションとパラメータの完全なリストについては tangiblee-mapper.js をご覧ください API イントロダクション ナレッジベースのAPIドキュメントセクションにある記事。
以下は、のサンプルコードです tangiblee-mapper.js スクリプトには以下のプロパティが設定されています。
- PDP には 2 つのSKU があります
- 1 つのアクティブなロケール
- 価格/通貨/ATC ポップアップ
<!-- tangiblee-mapper.js code placed in a <script> tag -->
<script>
(function(){
// helper function containing the code
// that injects the demo CTA.
// this code should be replaced with a
// real CTA injecting for a given PDP
var showCta = function (ctaThumbs) {
var ctaClassName = 'tangiblee-cta',
cta = document.getElementsByClassName(ctaClassName)[0];
if (!cta && window.thumbsCarousel) {
var existingThumb = document.querySelector('.thumbsCarousel img');
var wrapper = document.createElement('div');
wrapper.style.position = 'relative';
wrapper.style.width = existingThumb.width + 'px';
wrapper.style.height = existingThumb.height + 'px';
var btn = document.createElement('button');
btn.style.position = 'absolute';
btn.style.top = '50%';
btn.style.left = '50%';
btn.style.display = 'block';
btn.style.margin = '-38px 0 0 -38px';
btn.className = ctaClassName;
btn.style.border = '1px solid #333';
btn.style.padding = '0';
btn.style.backgroundColor = '#fff';
btn.style.width = '76px';
btn.style.height = '76px';
btn.style.fontSize = '1.4em';
btn.style.fontWeight = 'bold';
btn.style.lineHeight = '1.1em';
btn.style.textAlign = 'center';
btn.innerText = 'Will It Fit?';
wrapper.appendChild(btn);
window.thumbsCarousel.append(wrapper);
}
return ctaClassName;
};
// helper function containing the code
// that hides the demo CTA.
// this code should be replaced with a
// real CTA hiding for a given PDP
var hideCTA = function (activeSKU) {
var cta = document.getElementsByClassName('tangiblee-cta')[0];
if (cta) {
cta.parentNode.removeChild(cta);
}
};
// helper function containing the code
// that listens for the SKU change on the page and calls
// tangiblee('activeSKU', activeSku);
// when the value of active SKU is changed.
// this code should be replaced with a
// real SKU change detection for a given PDP
var skuChangingElement = document.getElementsByClassName('single-option-selector')[0];
skuChangingElement.addEventListener('change', function () {
var activeSku,
selectedValue = document.getElementsByClassName('single-option-selector')[0].value;
for (var i = 0; i < meta.product.variants.length; i = i + 1) {
if (meta.product.variants[i].public_title === selectedValue) {
activeSku = meta.product.variants[i].sku;
break;
}
}
if (activeSku) {
tangiblee('activeSKU', activeSku);
}
});
window.tangiblee = window.tangiblee || function () {
(tangiblee.q = tangiblee.q || []).push(arguments);
};
tangiblee('domain', 'www.tangiblee-integration.com');
tangiblee('activeLocale', 'en-US');
tangiblee('useCookies', true);
tangiblee('widgetVersion', 'v3');
tangiblee('useEnhancedEcommerce', true);
tangiblee('showCTA', showCta);
tangiblee('hideCTA', hideCTA);
tangiblee('activeCurrency', '$');
tangiblee('activeATC', '.btn-cart');
tangiblee('onSKUsValidated', function (atLeastOneSKUIsValid) {
console.log('At least one SKU is valid: ' + JSON.stringify(atLeastOneSKUIsValid));
});
tangiblee('onCTAFirstShown', function () {
console.log('Tangiblee CTA first shown!');
});
tangiblee('onCtaClicked', function () {
console.log('Tangiblee CTA clicked!');
});
tangiblee('onModalOpened', function () {
console.log('Tangiblee modal opened!');
});
tangiblee('onIframeLoaded', function () {
console.log('Tangiblee iframe loaded!');
});
tangiblee('onModalClosed', function () {
console.log('Tangiblee modal closed!');
});
tangiblee('activeSKU', 'F123356');
tangiblee('startOnSKUs', ['F123356', 'F125170']);
tangiblee('activePrice', '350');
})();
</script>
<!-- generic Tangiblee API - tangiblee.min.js - code placed in a <script> tag -->
<script async src="https://cdn.tangiblee.com/integration/3.1/tangiblee.min.js"></script>
[.悪い]ご注意: これはインテグレーションスニペットではなく、このガイドのための一例です。Tangiblee の担当者は、オンボーディングプロセス中に Web サイト専用の統合スニペットを共有します。[.bad]
