セルフサービス統合
[.bad] 注意:セルフサービス統合は、非常に特殊なユースケースを除いて推奨されません。[.bad]
タンジブリーの推奨事項 マネージドインテグレーション 95％のお客様に。マネージド・インテグレーションを通じて、Tangiblee は QA を実施し、Tangiblee CTA と modal がクライアントの継続的な変更や導入に確実に従うようにする責任を負っています。ただし、製品レイアウトページが進行中である場合や、リプラットフォームの変更を行う予定で、当社が注意すべき場合は、Tangiblee (success@tangiblee.com) に通知する必要があることにご注意ください。そうでない場合、その変更は本番環境にデプロイされて初めてページに表示され、これらの変更を反映するようにマッピングを更新するまでTangiblee CTAは表示されません。
セルフサービス統合にはどのようなユースケースが考えられますか？
既存の電子商取引プラットフォーム上で動作するプログレッシブウェブアプリケーションを利用する場合は、セルフサービス統合を利用することをお勧めします。ただし、Tangiblee のエンジニアリングチームと話し合って、考えられるすべての統合オプションの概要を説明することをおすすめします。
セルフサービス統合の場合、クライアントは独自のマッピングコードを実装します (tangiblee-mapper.js) そしてそのロジックを完全に制御できます。
セルフサービス統合は、次の 2 つのコードブロックで構成されています。
- マッピングコード (tangiblee-mapper.js)
- タンジブル API コード (tangiblee.min.js)
<head><body>Tangiblee では、そのタグを他の Javascript タグがページに追加されているのと同じ場所に配置することを推奨しています。つまり、or セクションの末尾であってもかまいません。Tangiblee タグを経由して追加した場合 グーグルタグマネージャー (GTM) その後、GTMがそれを自動的に管理します。
たとえば、クライアントが PRD と STD などの 2 つの異なる環境をサポートするために 2 つのバージョンのスニペットを必要とする場合、別々の 2 つのバージョンを使用して対応できます。 tangiblee-mapper.js PRD 環境と STG 環境用のファイル。
一般的なセルフサービス統合
ザの tangiblee-mapper.js に似ています マネージド・インテグレーション・プロダクション PDP バージョンの例 しかし、Tangiblee CDNからロードする代わりに、クライアントによって作成され、PDPで直接ホストされるようになりました。
[.good] ジェネリックのみ タンジブル API Tangiblee CDN への呼び出しが行われると、ロードにかかる往復が 1 回減ります mapper.js タンジブルCDNから。[.good]
- 1 つの PDP に 1 つのSKU
- 1 つのアクティブなロケール
- ウィジェットに価格/通貨/ATCなし
- オーダートラッキングなし
*`<!-- tangiblee-mapper.js code placed in a <script> tag -->`*
`<script>`
*`// 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.example.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>`
### Multi SKU Multi Locale Self-Service Integration
Advanced Self-Service Integration example: [Advanced Self-Service Integration Sample Link.](https://tngsandbox.myshopify.com/products/andre-sofa-bed)
Same as in the previous example, also in the Advanced example, the Mapping Code is written by the client and hosted on the client's PDP.
This example shows how to use Tangiblee on:
1. Multiple SKUs on a PDP (in this case two).
2. Multiple locales
3. *Price/Currency/ATC in-widget*
4. *Order Tracking on Thank You Page*
*`<!-- tangiblee-mapper.js code placed in a <script> tag -->`*
`<script>`
*`// 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('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>`マルチ SKU マルチロケールセルフサービス統合
高度なセルフサービス統合の例: 高度なセルフサービス統合のサンプルリンク
前の例と同じように、高度な例でも、マッピングコードはクライアントによって記述され、クライアントのPDPでホストされます。
この例は、Tangiblee を以下の用途に使用する方法を示しています。
- 1つのPDPに複数のSKU（この場合は2つ）。
- 複数のロケール
- 価格/通貨/ATC ウィジェット内
- サンキューページのオーダートラッキング
*`<!-- tangiblee-mapper.js code placed in a <script> tag -->`*
`<script>`
*`// 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('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>`