How Convert Experiences Works Behind the Scenes

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title> How Convert Experiences Works Behind the Scenes </title> <meta name="description" content="All that needs to be done in order to run an experience is to insert a small piece of Javascript code into the header of the page(s). Once added, that code will send tracking requests to Convert serve"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:description" content="All that needs to be done in order to run an experience is to insert a small piece of Javascript code into the header of the page(s). Once added, that code will send tracking requests to Convert serve"> <meta property="og:title" content="How Convert Experiences Works Behind the Scenes"> <meta name="twitter:description" content="All that needs to be done in order to run an experience is to insert a small piece of Javascript code into the header of the page(s). Once added, that code will send tracking requests to Convert serve"> <meta name="twitter:title" content="How Convert Experiences Works Behind the Scenes"> <link rel="stylesheet" href="/hs/hsstatic/ContentIcons/static-1.198/fontawesome/5.0.10/css/fontawesome-all.min.css"> <style> a.cta_button{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;vertical-align:middle}.hs-breadcrumb-menu{list-style-type:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px}.hs-breadcrumb-menu-item{float:left;padding:10px 0px 10px 10px}.hs-breadcrumb-menu-divider:before{content:'›';padding-left:10px}.hs-featured-image-link{border:0}.hs-featured-image{float:right;margin:0 0 20px 20px;max-width:50%}@media (max-width: 568px){.hs-featured-image{float:none;margin:0;width:100%;max-width:100%}}.hs-screen-reader-text{clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px} </style> <style> @font-face { font-family: "Oxygen"; font-weight: 400; font-style: normal; font-display: swap; src: url("/_hcms/googlefonts/Oxygen/regular.woff2") format("woff2"), url("/_hcms/googlefonts/Oxygen/regular.woff") format("woff"); } </style> <link rel="canonical" href="https://support.convert.com/hc/en-us/articles/204490299-how-convert-experiences-works-behind-the-scenes"> <meta property="og:url" content="https://support.convert.com/hc/en-us/articles/204490299-how-convert-experiences-works-behind-the-scenes"> <meta http-equiv="content-language" content="en"> <link href="//7052064.fs1.hubspotusercontent-na1.net/hub/7052064/hub_generated/template_assets/1732641008215/hubspot/themes/knowledge/assets/main.css" rel="stylesheet"> <link href="//7052064.fs1.hubspotusercontent-na1.net/hub/7052064/hub_generated/template_assets/1732641003004/hubspot/themes/knowledge/assets/_support-form.min.css" rel="stylesheet"> <script type="text/javascript" src="//7052064.fs1.hubspotusercontent-na1.net/hub/7052064/hub_generated/template_assets/1732641006129/hubspot/themes/knowledge/assets/kbdom.min.js"></script> <style type="text/css" data-preview-theme="true"> .kb-article, .kb-search__suggestions__article-content, .kb-search-results__description { font-family: 'Oxygen'; } h1, h2, h3, h3 a, h4, h4 a, h5, h6, .kb__text-link, .kb__text-link-small, .kb-header, .kb-sticky-footer, .kb-search__suggestions__article-title, .kb-search-results__title, #hs_form_target_kb_support_form input.hs-button, #hs_form_target_kb_support_form label, input, select, textarea, #hs_form_target_kb_support_form .hs-field-desc, #hs_form_target_kb_support_form .hs-richtext p { font-family: 'Oxygen'; } a, .kb-search__suggestions__breadcrumb, .kb-header__nav .kbui-dropdown__link { color: #0066ff; } .kb-header, .kb-header a, .kb-header button.kb-button--link { color: #ffffff; } .kb-header svg * { fill: #ffffff; } .kb-search-section { background-color: #ffffff; } .kb-search-section__title { color: #ffffff; } .kb-search-section-with-image { background-image: url(https://support.convert.com/hubfs/kb-bg-1.jpg); background-size: cover; color: #ffffff; position: relative; } .kb-search-section-with-gradient { background-color: ; background-image: linear-gradient(180deg, #ffffff 0%, transparent 97%); } .kb-mobile-search-section { background-color: #ffffff; } .kb-search__suggestions a:hover, .kb-search__suggestions a:focus, .kb-category-menu li.active > a, .kb-category-menu li > a:hover { background-color: rgba(0, 102, 255, .1); } .kb-theme--cards .kb-category-menu li.active > a, .kb-theme--cards .kb-category-menu li > a:hover { background-color: transparent; } .kb-breadcrumbs > ol > li > span, .kb-breadcrumbs > ol > li > a > span, .kb-breadcrumbs > .kb-breadcrumbs__mobile-back a { font-family: 'Oxygen'; } .kb-breadcrumbs__arrow--left * { fill: #0066ff } .kb-sidebar .kb-category-menu a, .kb-mobile-menu .kb-mobile-menu__current-page, .kb-mobile-menu ul > li > a { font-family: 'Oxygen'; } .kb-header__logo img { max-height: 32px; } .kb-footer__logo img { max-height: 24px; } /* SVG SUPPORT */ .kb-header__logo img[src$=".svg"] { height: 32px; } .kb-footer__logo img[src$=".svg"] { height: 24px; } /* MOBILE STYLES */ .kb-mobile-menu, .kb-mobile-search__bar { background-color: #ffffff; } .kb-mobile-menu a, .kb-mobile-menu__current-page, .kb-mobile-search__input, .kb-search--open .kb-mobile-search__input { color: #111111 } .kb-mobile-search__input::-webkit-input-placeholder { color: #111111 } .kb-mobile-search__input::-moz-placeholder { color: #111111 } .kb-mobile-search__input:-ms-input-placeholder { color: #111111 } .kb-mobile-search__input:-moz-placeholder { color: #111111 } .kb-mobile-search__mag * { fill: #111111 } .kb-mobile-menu__arrow *, .kb-mobile-search__close * { stroke: #111111 } @media (max-width: 767px) { .kb-header__nav { background-color: #ffffff } .kb-header, .kb-header a { color: #111111; } .kb-header svg * { fill: #111111; } .kb-theme--content.kb-page--index .kb-header__nav-toggle svg *, .kb-theme--content.kb-page--index .kb-header__nav-close svg *, .kb-theme--tiles.kb-page--index .kb-header__nav-toggle svg *, .kb-theme--tiles.kb-page--index .kb-header__nav-close svg *, .kb-theme--minimal .kb-header__nav-toggle svg *, .kb-theme--minimal .kb-header__nav-close svg *, .kb-theme--cards .kb-header__nav-toggle svg *, .kb-theme--cards .kb-header__nav-close svg *, .kb-theme--default .kb-header__nav-toggle svg *, .kb-theme--default .kb-header__nav-close svg * { fill: #ffffff; } } </style> <meta name="generator" content="HubSpot"></head> <body class="kb-theme--content "> <header> <div class="kb-header" data-preview-id="kb-header"> <div class="kb-header-inner" id="kb-header"> <div class="kb-header__logo"> <img src="https://20848441.fs1.hubspotusercontent-na1.net/hub/20848441/hubfs/convert-logo-white.png?height=120&name=convert-logo-white.png" alt="company logo"> </div> <a class="kb-header__title" href="/hc/en-us/articles"> Help Center </a> <nav id="kb-header__nav" class="kb-header__nav" role="navigation"> <ul> <li class="kb-header__company-website-link"> <a href="//convert.com" target="_blank" rel="noopener"> Go to convert.com <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"> <path d="M8.11 10.223V7.0472l1.308-1.3077v4.4835c0 .9323-.7628 1.6952-1.6953 1.6952H1.6952C.7628 11.9182 0 11.1553 0 10.223V4.1955C0 3.2628.7628 2.5 1.6952 2.5h4.4833L4.8707 3.8082H1.6952c-.2099 0-.3872.1771-.3872.3873v6.0275c0 .2098.1773.387.3872.387h6.0275c.21 0 .3873-.1772.3873-.387zM5.9428.4417L12.0137 0l-.442 6.0708L9.6368 4.136 6.0925 7.68 4.3333 5.9207l3.544-3.5442L5.9428.4417z" fill="#0066ff" /> </svg> </a> </li> </ul> </nav> <div class="kb-header__nav-controls-container"> <button id="kb-header__close-target" class="kb-header__nav-close" role="button" aria-label="Close main navigation menu" aria-controls="kb-header__nav kb-header__langs-nav"> <span class="kb-icon close" aria-hidden="true"> <svg width="16" height="17" xmlns="http://www.w3.org/2000/svg"> <g fill="#2D3E50" fill-rule="nonzero"> <path d="M15.07107 1.42893c.59587.59588.88893 1.23239.0505 2.07081L2.99975 15.62158c-.83842.83842-1.48089.5394-2.0708-.05051C.33305 14.97519.04 14.33868.87841 13.50026L13.00026 1.37842c.83842-.83842 1.48089-.5394 2.0708.05051z" /> <path d="M15.07107 15.57107c-.59588.59587-1.23239.88893-2.07081.0505L.87842 3.49975C.04 2.66132.33902 2.01885.92893 1.42894 1.52481.83305 2.16132.54 2.99974 1.37841l12.12184 12.12184c.83842.83842.5394 1.48089-.05051 2.0708z" /> </g> </svg> </span> </button> <button id="kb-header__main-nav-target" class="kb-header__nav-toggle" role="button" aria-label="Open main navigation menu" aria-controls="kb-header__nav"> <span class="kb-icon menu"> <svg width="25" height="17" xmlns="http://www.w3.org/2000/svg"> <g fill="#2D3E50" fill-rule="nonzero"> <path d="M24.56897 2.295c0 .85-.2931 1.513-1.72414 1.513H2.15517C.72414 3.808.43103 3.1365.43103 2.295c0-.85.2931-1.513 1.72414-1.513h20.68966c1.43103 0 1.72414.6715 1.72414 1.513zM24.56897 8.8315c0 .85-.2931 1.513-1.72414 1.513H2.15517c-1.43103 0-1.72414-.6715-1.72414-1.513 0-.85.2931-1.513 1.72414-1.513h20.68966c1.43103 0 1.72414.6715 1.72414 1.513zM24.56897 15.3595c0 .85-.2931 1.513-1.72414 1.513H2.15517c-1.43103 0-1.72414-.6715-1.72414-1.513 0-.85.2931-1.513 1.72414-1.513h20.68966c1.43103 0 1.72414.6715 1.72414 1.513z" /> </g> </svg> </span> </button> </div> </div> </div>  <div class="kb-mobile-search-section"> <div class="kb-mobile-header"> <div class="kb-mobile-menu"> <div class="kb-mobile-menu__current-page"> Getting Started <svg class="kb-mobile-menu__arrow" width="12" height="7" xmlns="http://www.w3.org/2000/svg"> <path d="M10.6817 1.6816l-4.5364 4-4.5364-3.9315" stroke="#00A38D" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <ul> <li class="active open"> <a href="/hc/en-us/articles/getting-started"> Getting Started </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/configuration"> Configuration </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/track-goals"> Track Goals </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/target-visitors"> Target Visitors </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/troubleshooting"> Troubleshooting </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/analyze-results"> Analyze Results </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/integrations"> Integrations </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/account-management"> Account Management </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/developers"> Developers </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/whats-new"> What's New </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/common-questions"> Common Questions </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/shopify"> Shopify </a> <ul> </ul> </li> </ul> </div> <div class="kb-mobile-search kb-search" kb-language-tag="en" kb-group-id="100971359025"> <div class="kb-mobile-search__placeholder"></div> <div class="kb-mobile-search__box"> <div class="kb-mobile-search__bar"> <svg class="kb-mobile-search__mag" width="15" height="15" xmlns="http://www.w3.org/2000/svg"> <path d="M14.02 12.672l-3.64-3.64a5.687 5.687 0 0 0 1.06-3.312A5.726 5.726 0 0 0 5.72 0 5.726 5.726 0 0 0 0 5.72a5.726 5.726 0 0 0 5.72 5.72 5.687 5.687 0 0 0 3.311-1.06l3.641 3.64a.95.95 0 0 0 1.348 0 .953.953 0 0 0 0-1.348zm-8.3-3.139a3.813 3.813 0 1 1 0-7.626 3.813 3.813 0 0 1 0 7.626z" fill="#4A4A4A" fill-rule="evenodd" /> </svg> <form action="/hc/en-us/articles/kb-search-results"> <input type="text" class="kb-mobile-search__input kb-search__input" name="term" autocomplete="off" placeholder="Search for answers"> <input type="hidden" name="ref" value="163064447068"> </form> <svg class="kb-mobile-search__close" width="14" height="14" xmlns="http://www.w3.org/2000/svg"> <g stroke="#4A4A4A" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> <path d="M1 12.314L12.314 1M12.314 12.314L1 1" /> </g> </svg> </div> <ul class="kb-search__suggestions" data-lang="Results for """></ul> </div> </div> </div> </div> <script> kbDom.whenReady(function() { // Mobile Nav Menu var mobileToggle = function() { var navMenuOpen = document.getElementById('kb-header__main-nav-target'); var langNavOpen = document.getElementById('kb-header__langs-nav-target'); var navClose = document.getElementById('kb-header__close-target'); navMenuOpen.addEventListener('click',function() { document.body.classList.toggle('kb-header__main-nav-open'); }); if (langNavOpen) { langNavOpen.addEventListener('click',function() { document.body.classList.toggle('kb-header__lang-nav-open'); }); } navClose.addEventListener('click',function() { document.body.classList.remove('kb-header__main-nav-open'); document.body.classList.remove('kb-header__lang-nav-open'); }); }; window.addEventListener('click', mobileToggle); mobileToggle(); kbDom.initDropdown(document.querySelector('[data-kbui-dropdown-contents="lang-switcher"]')) // Mobile Cat Menu document.querySelector('.kb-mobile-menu__current-page').addEventListener('click',function() { document.querySelector('.kb-mobile-header').classList.toggle('menu-open'); }); document.querySelector('.kb-mobile-search__mag').addEventListener('click',function() { document.querySelector('.kb-mobile-header').classList.toggle('search-open'); if (document.querySelector('.kb-mobile-header').classList.contains('search-open')) { document.querySelector('.kb-mobile-search__input').focus(); } }); document.querySelector('.kb-mobile-search__close').addEventListener('click',function() { document.querySelector('.kb-mobile-header').classList.remove('search-open'); }); }); </script> <div class="kb-search-section kb-search-section--narrow kb-search-section-with-image "> <div class="kb-search-section__content content-container"> <div class="kb-search" kb-language-tag="en" kb-group-id="100971359025"> <div class="kb-search__placeholder"></div> <div class="kb-search__box"> <div class="kb-search__bar"> <svg class="kb-search__mag" width="15" height="15" xmlns="http://www.w3.org/2000/svg"> <path d="M14.02 12.672l-3.64-3.64a5.687 5.687 0 0 0 1.06-3.312A5.726 5.726 0 0 0 5.72 0 5.726 5.726 0 0 0 0 5.72a5.726 5.726 0 0 0 5.72 5.72 5.687 5.687 0 0 0 3.311-1.06l3.641 3.64a.95.95 0 0 0 1.348 0 .953.953 0 0 0 0-1.348zm-8.3-3.139a3.813 3.813 0 1 1 0-7.626 3.813 3.813 0 0 1 0 7.626z" fill="#4A4A4A" fill-rule="evenodd" /> </svg> <form action="/hc/en-us/articles/kb-search-results"> <input type="text" class="kb-search__input" name="term" autocomplete="off" placeholder="Search for answers" required> </form> <svg class="kb-search__close" width="14" height="14" xmlns="http://www.w3.org/2000/svg"> <g stroke="#4A4A4A" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> <path d="M1 12.314L12.314 1M12.314 12.314L1 1" /> </g> </svg> </div> <ul class="kb-search__suggestions" data-lang="Results for """></ul> </div> </div> </div> </div> </header> <main data-preview-id="kb-article-main"> <div class="content-container-outer"> <div class="content-container"> <div class="kb-breadcrumbs"> <div class="kb-breadcrumbs__mobile-back"> <svg class="kb-breadcrumbs__arrow kb-breadcrumbs__arrow--left" width="7" height="12" xmlns="http://www.w3.org/2000/svg"> <path d="M.055 5.7194c.018-.045.0518-.0835.0795-.125.0166-.0255.0322-.052.0489-.0775.007-.011.0116-.024.0216-.034L5.2426.2328c.2877-.3.7662-.3115 1.0685-.026a.7468.7468 0 0 1 .0262 1.0605L1.7954 6l4.5419 4.733a.7462.7462 0 0 1-.0262 1.0601.7563.7563 0 0 1-.5214.207.7568.7568 0 0 1-.547-.2325L.205 6.5174c-.01-.0105-.0146-.023-.0216-.0345-.0167-.025-.0323-.0515-.0489-.077-.0277-.0415-.0615-.08-.0796-.125-.0186-.0455-.0222-.0935-.0312-.141C.0147 6.0934 0 6.0474 0 5.9999c0-.047.0146-.093.0237-.1395.009-.0475.0126-.096.0312-.141" fill="#7C98B6" fill-rule="evenodd" /> </svg> <a href="/hc/en-us/articles">Back to home</a> </div> <ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="/hc/en-us/articles"> <span itemprop="name">Help Center</span> </a> <meta itemprop="position" content="1"> </li> <svg class="kb-breadcrumbs__arrow kb-breadcrumbs__arrow--right" width="7" height="12" xmlns="http://www.w3.org/2000/svg"> <path d="M6.4905 5.7194c-.018-.045-.0518-.0835-.0795-.125-.0167-.0255-.0323-.052-.049-.0775-.007-.011-.0115-.024-.0216-.034L1.3028.2328c-.2876-.3-.7662-.3115-1.0684-.026a.7468.7468 0 0 0-.0262 1.0605L4.75 6l-4.542 4.733a.7462.7462 0 0 0 .0263 1.0601.7563.7563 0 0 0 .5213.207.7568.7568 0 0 0 .5471-.2325l5.0376-5.2501c.0101-.0105.0146-.023.0217-.0345.0166-.025.0322-.0515.0489-.077.0277-.0415.0614-.08.0795-.125.0187-.0455.0222-.0935.0313-.141.009-.0465.0237-.0925.0237-.14 0-.047-.0147-.093-.0237-.1395-.009-.0475-.0126-.096-.0313-.141" fill="#7C98B6" fill-rule="evenodd" /> </svg> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <span itemprop="name">Getting Started</span> <meta itemprop="position" content="2"> </li> </ol> </div> <div class="main-body"> <div class="kb-sidebar"> <div class="kb-category-menu"> <ul> <li class="open"> <a href="/hc/en-us/articles/getting-started"> <div class="kb-category-menu-option" data-id="168263680815"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Getting Started </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/configuration"> <div class="kb-category-menu-option" data-id="168263365897"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Configuration </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/track-goals"> <div class="kb-category-menu-option" data-id="168263681299"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Track Goals </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/target-visitors"> <div class="kb-category-menu-option" data-id="168263681310"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Target Visitors </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/troubleshooting"> <div class="kb-category-menu-option" data-id="168263681319"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Troubleshooting </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/analyze-results"> <div class="kb-category-menu-option" data-id="168263681339"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Analyze Results </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/integrations"> <div class="kb-category-menu-option" data-id="168263681347"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Integrations </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/account-management"> <div class="kb-category-menu-option" data-id="168263365931"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Account Management </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/developers"> <div class="kb-category-menu-option" data-id="168263681365"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Developers </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/whats-new"> <div class="kb-category-menu-option" data-id="168263681372"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> What's New </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/common-questions"> <div class="kb-category-menu-option" data-id="172314001336"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Common Questions </div> </a> <ul> </ul> </li> <li> <a href="/hc/en-us/articles/shopify"> <div class="kb-category-menu-option" data-id="176843746416"> <span class="kb-category-menu-option__color-bar" style="background-color: #0066ff;"></span> Shopify </div> </a> <ul> </ul> </li> </ul> </div> <script> kbDom.whenReady(function() { document.querySelectorAll('.kb-category-menu svg').forEach(function(el) { el.addEventListener('click', function(e) { e.preventDefault(); var li = kbDom.closest('li', this); if (li) { li.classList.toggle('open'); } }); }) }) </script> </div> <div class="kb-content"> <div class="kb-article tinymce-content"> <h1><span id="hs_cos_wrapper_name" class="hs_cos_wrapper hs_cos_wrapper_meta_field hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="meta_field" data-hs-cos-type="text">How Convert Experiences Works Behind the Scenes</span></h1> <h4>THIS ARTICLE WILL HELP YOU:</h4> <ul> <li><a href="#s1" rel="noopener"><strong>Grasp the Fundamental Way in Which Convert Works</strong></a></li> </ul> <a id="s1" data-hs-anchor="true"></a> <h4>Grasp the Fundamental Way in Which Convert Works</h4> <p>All that needs to be done in order to run an experience is to insert a small piece of Javascript code into the header of the page(s).</p> <p>Once added, that code will send tracking requests to Convert servers and will receive back the testing data that needs to be available in order to run the experiences. More exactly, the backend servers would analyze the data received from the browser, would load visitors’ history, and based on that would decide which variation of a certain experience should present back.</p> <p>The variation content is sent back to the browser where it is processed. Javascript code is used to manipulate certain objects inside the DOM structure to create variations. An example of such a piece of code is the following:</p> <p><code> convert._$(‘.buy_now’).val(“Add to Cart”); </code></p> <p><br>The first part is the jQuery reference (which is made available on any page that has Convert Experiment’s code installed). The second part is just a basic jQuery function that will change the value of all the elements that have class buy_now (probably add to cart buttons) to Add to Cart.</p> <p>Once the variation code is made available in the browser, element changes occur through a patented process which will poll the existence of elements and change them as soon as they are available, eliminating the flickering effect induced with the change.</p> <p>On average sites that have Convert Experiences code installed before any other resource on the page (below <title>), the changes of elements according to the variation content occurs usually even before the full page is loaded. (An exception is Internet Explorer, for which the changes are done immediately after DOM Loaded event is fired).</p> <p>As a conclusion, to be able to do A/B testing on your website, all that needs to be done is to add the Convert Experiences code in the head section, just after the <title> tag.</p> <p>Any other modification of the source code of the website is not needed! More than this, since the tested variation changes are applied through JavaScript and not by modifying the source code of the page, your SEO efforts won't be affected.</p> </div> <script> kbDom.whenReady(function() { var smoothScroll = new smoothAnchorsScrolling(); var articleSmoothScrolling = function() { function scrollToAnchor(state) { const anchorId = (state && state.anchorId) || null; if (!anchorId) { return; } var anchor = document.querySelector( '[id="' + anchorId.substring(1) + '"][data-hs-anchor="true"]' ); smoothScroll.scrollTo(anchor); } document .querySelectorAll('a[href^="#"][rel*="noopener"]') .forEach(function(link) { // Adding the handler to the click event on each anchor link link.addEventListener('click', function(e) { e.preventDefault(); var node = e.currentTarget; var targetAnchorId = decodeURI(node.hash); var state = { anchorId: targetAnchorId }; scrollToAnchor(state); history.pushState(state, null, node.href); }); }); window.addEventListener('popstate', function(e) { if (e.state !== undefined) { scrollToAnchor(e.state); } }); (function() { var targetAnchorId = decodeURI(window.location.hash); var initialState = { anchorId: targetAnchorId, }; if (targetAnchorId) { setTimeout(function() { scrollToAnchor(initialState); }, 1); } history.pushState(initialState, null, ''); })(); }; window.addEventListener('load', function(e) { articleSmoothScrolling(); }); }); </script> <div id="ka-feedback-form-container" portal-id="20848441" article-id="163064447068" knowledge-base-id="100971359025" article-language-tag="en" ungated-for-multi-language="true" enviro="prod" feedback-hubapi-domain="feedback.hubapi.com" js-feedback-domain="js.hubspotfeedback.com"> <div id="ka-feedback-form"></div> <link rel="stylesheet" href="https://js.hubspotfeedback.com/feedbackknowledge.css"> <script type="text/javascript" src="https://js.hubspotfeedback.com/feedbackknowledge.js"></script> </div> <div id="kb-related-articles-container" portal-id="20848441" knowledge-base-id="100971359025" article-id="163064447068" article-language="en" heading="Related articles" enviro="prod" public-hubapi-domain="public.hubapi.com"> <div id="kb-related-articles"></div> <link rel="stylesheet" href="https://js.hubspotfeedback.com/relatedarticles.css"> <script type="text/javascript" src="https://js.hubspotfeedback.com/relatedarticles.js"></script> </div> </div> </div> </div> </div> </main> <footer> <div class="kb-sticky-footer" data-preview-id="kb-footer"> <div class="kb-footer"> <div class="kb-footer__center-aligned-content"> <div class="kb-footer__logo"> <img src="https://20848441.fs1.hubspotusercontent-na1.net/hub/20848441/hubfs/convert-icon-60x60.png?height=120&name=convert-icon-60x60.png" alt="company logo"> </div> <div class="kb-footer__title">Experimentation is Human Nature.</div> </div> <div class="kb-footer__links-container"> <ul class="kb-footer__links columns__three"> <li class="kb-footer__company-website-link"> <a href="//convert.com" target="_blank" rel="noopener"> Go to convert.com <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"> <path d="M8.11 10.223V7.0472l1.308-1.3077v4.4835c0 .9323-.7628 1.6952-1.6953 1.6952H1.6952C.7628 11.9182 0 11.1553 0 10.223V4.1955C0 3.2628.7628 2.5 1.6952 2.5h4.4833L4.8707 3.8082H1.6952c-.2099 0-.3872.1771-.3872.3873v6.0275c0 .2098.1773.387.3872.387h6.0275c.21 0 .3873-.1772.3873-.387zM5.9428.4417L12.0137 0l-.442 6.0708L9.6368 4.136 6.0925 7.68 4.3333 5.9207l3.544-3.5442L5.9428.4417z" fill="#0066ff" /> </svg> </a> </li> <li class="kb-footer__custom-link"><a href="https://www.convert.com/features/">Features</a></li> <li class="kb-footer__custom-link"><a href="https://www.convert.com/about/">About Us</a></li> </ul> </div> </div> </div> </footer>  <script defer src="/hs/hsstatic/content-cwv-embed/static-1.1293/embed.js"></script>  <script type="text/javascript"> var _hsq = _hsq || []; _hsq.push(["setContentType", "knowledge-article"]); _hsq.push(["setCanonicalUrl", "https:\/\/support.convert.com\/hc\/en-us\/articles\/204490299-how-convert-experiences-works-behind-the-scenes"]); _hsq.push(["setPageId", "163064447068"]); _hsq.push(["setContentMetadata", { "contentPageId": 163064447068, "legacyPageId": "163064447068", "contentFolderId": null, "contentGroupId": 100971359025, "abTestId": null, "languageVariantId": 163064447068, "languageCode": "en", }]); </script> <script type="text/javascript" id="hs-script-loader" async defer src="/hs/scriptloader/20848441.js"></script>  <script type="text/javascript"> var hsVars = { render_id: "028cd71c-67cd-4a25-8e3b-95c4b6a89573", ticks: 1732716276540, page_id: 163064447068, content_group_id: 100971359025, portal_id: 20848441, app_hs_base_url: "https://app.hubspot.com", cp_hs_base_url: "https://cp.hubspot.com", language: "en", analytics_page_type: "knowledge-article", scp_content_type: "", analytics_page_id: "163064447068", category_id: 6, folder_id: 0, is_hubspot_user: false } </script> <script defer src="/hs/hsstatic/HubspotToolsMenu/static-1.354/js/index.js"></script> <script type="text/javascript" src="//7052064.fs1.hubspotusercontent-na1.net/hub/7052064/hub_generated/template_assets/1732641006691/hubspot/themes/knowledge/assets/lib/dompurify/purify.min.js"></script> <script type="text/javascript" src="//7052064.fs1.hubspotusercontent-na1.net/hub/7052064/hub_generated/template_assets/1732641004233/hubspot/themes/knowledge/assets/kb-search.min.js"></script> <script type="text/javascript" src="//7052064.fs1.hubspotusercontent-na1.net/hub/7052064/hub_generated/template_assets/1732641014075/hubspot/themes/knowledge/assets/sticky-header.min.js"></script> <script type="text/javascript" src="//7052064.fs1.hubspotusercontent-na1.net/hub/7052064/hub_generated/template_assets/1732641012561/hubspot/themes/knowledge/assets/smooth-anchors-scrolling.min.js"></script> </body></html>

CINXE.COM

How Convert Experiences Works Behind the Scenes