{"id":13789,"date":"2025-03-06T12:36:28","date_gmt":"2025-03-06T11:36:28","guid":{"rendered":"https:\/\/help.expertsender.com\/?post_type=ecdp&#038;p=13789"},"modified":"2025-03-06T12:41:20","modified_gmt":"2025-03-06T11:41:20","slug":"implementing-ecdp-checkout-tracking-in-shopify","status":"publish","type":"ecdp","link":"https:\/\/help.expertsender.com\/pl\/ecdp\/implementing-ecdp-checkout-tracking-in-shopify\/","title":{"rendered":"Implementing ECDP Checkout Tracking in Shopify"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"pre-requirements\"><strong>Pre-Requirements<\/strong><a href=\"#pre-requirements\" class=\"not-prose content-heading-link\">#<\/a><\/h2>\n\n\n\n<p>Before proceeding with the implementation, ensure the following conditions are met:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Enable Special Cookie Settings<\/strong>\n<ul class=\"wp-block-list\">\n<li>Additional information must be included in cookies.<\/li>\n\n\n\n<li>Contact the <strong>ES team<\/strong> to enable this setting.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Upload the Tracking Script<\/strong>\n<ul class=\"wp-block-list\">\n<li>The tracking script must be added to the website.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>API Requirement<\/strong>\n<ul class=\"wp-block-list\">\n<li>This feature functions only when orders are added to <strong>ECDP<\/strong> using the API.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"why-is-this-request-needed\"><strong>Why Is This Request Needed?<\/strong><a href=\"#why-is-this-request-needed\" class=\"not-prose content-heading-link\">#<\/a><\/h2>\n\n\n\n<p>Shopify restricts the execution of external scripts on the checkout page. Without this script, <strong>ECDP<\/strong> cannot determine if a session concludes with a purchase. This can lead to issues like <strong>false-positive abandoned carts<\/strong>.<\/p>\n\n\n\n<p>By implementing this request, <strong>ECDP<\/strong> is informed that a session successfully ends with an order. The order details must be provided using the API.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"how-to-implement-the-endpoint\"><strong>How to Implement the Endpoint<\/strong><a href=\"#how-to-implement-the-endpoint\" class=\"not-prose content-heading-link\">#<\/a><\/h2>\n\n\n\n<p>Follow these steps to set up the tracking endpoint in Shopify:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Log in<\/strong> to your Shopify <strong>Admin Panel<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>2. Navigate to: <strong>Settings \u2192 Custom Events \u2192 Add Custom Pixel<\/strong>.<\/p>\n\n\n\n<p>3. Name the pixel: <strong>&#8220;ECDP Checkout Tracking&#8221;<\/strong>.<\/p>\n\n\n\n<p>4. Adjust the <strong>permissions<\/strong> as per the reference screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"395\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/03\/image-4.png\" alt=\"\" class=\"wp-image-13804\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/03\/image-4.png 683w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/03\/image-4-300x173.png 300w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/figure>\n\n\n\n<p>5. Add the following code to the pixel:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#babed8;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"const checkoutRequest = async (e) =&gt; {\n    let t = await browser.cookie.get(&quot;__ecdp_visitor&quot;),\n        a = await browser.cookie.get(&quot;__ecdp_more_info&quot;);\n\n    if (typeof t === &quot;string&quot; &amp;&amp; typeof a === &quot;string&quot;) {\n        let r = JSON.parse(t),\n            c = JSON.parse(a),\n            o = r.vId,\n            i = c.uId,\n            d = c.wId;\n\n        if (o &amp;&amp; i &amp;&amp; d) {\n            let n = {\n                url: init.data.shop.storefrontUrl,\n                orderId: e,\n                IdentifyRequest: {\n                    uId: i,\n                    wId: d,\n                    vId: o\n                }\n            };\n\n            await fetch(&quot;https:\/\/sherlock.ecdp.cloud\/registerOrderId&quot;, {\n                method: &quot;POST&quot;,\n                keepalive: true,\n                body: JSON.stringify(n)\n            });\n        }\n    }\n};\n\nanalytics.subscribe(&quot;checkout_completed&quot;, (e) =&gt; {\n    if (e.data.checkout.order?.id) {\n        checkoutRequest(e.data.checkout.order.id);\n    }\n});\n\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-palenight\" style=\"background-color: #292D3E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> checkoutRequest <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">async<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8\">e<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=&gt;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    let t <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> await browser<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">cookie<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">get<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">__ecdp_visitor<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        a <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> await browser<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">cookie<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">get<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">__ecdp_more_info<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">if<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8\">typeof t <\/span><span style=\"color: #89DDFF\">===<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">string<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&amp;&amp;<\/span><span style=\"color: #BABED8\"> typeof a <\/span><span style=\"color: #89DDFF\">===<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">string<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        let r <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> JSON<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">parse<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8\">t<\/span><span style=\"color: #89DDFF\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">            c <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> JSON<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">parse<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8\">a<\/span><span style=\"color: #89DDFF\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">            o <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> r<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">vId<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">            i <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> c<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">uId<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">            d <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> c<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">wId<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF; font-style: italic\">if<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8\">o <\/span><span style=\"color: #89DDFF\">&amp;&amp;<\/span><span style=\"color: #BABED8\"> i <\/span><span style=\"color: #89DDFF\">&amp;&amp;<\/span><span style=\"color: #BABED8\"> d<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">            let n <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">                <\/span><span style=\"color: #FFCB6B\">url<\/span><span style=\"color: #BABED8\">: init<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">data<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">shop<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">storefrontUrl<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">                <\/span><span style=\"color: #FFCB6B\">orderId<\/span><span style=\"color: #BABED8\">: e<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">                <\/span><span style=\"color: #FFCB6B\">IdentifyRequest<\/span><span style=\"color: #BABED8\">: <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">                    <\/span><span style=\"color: #FFCB6B\">uId<\/span><span style=\"color: #BABED8\">: i<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">                    <\/span><span style=\"color: #FFCB6B\">wId<\/span><span style=\"color: #BABED8\">: d<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">                    <\/span><span style=\"color: #FFCB6B\">vId<\/span><span style=\"color: #BABED8\">: o<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">                <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">            <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">            await <\/span><span style=\"color: #82AAFF\">fetch<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">https:\/\/sherlock.ecdp.cloud\/registerOrderId<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">                <\/span><span style=\"color: #FFCB6B\">method<\/span><span style=\"color: #BABED8\">: <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">POST<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">                <\/span><span style=\"color: #FFCB6B\">keepalive<\/span><span style=\"color: #BABED8\">: <\/span><span style=\"color: #89DDFF\">true,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">                <\/span><span style=\"color: #FFCB6B\">body<\/span><span style=\"color: #BABED8\">: JSON<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">stringify<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8\">n<\/span><span style=\"color: #89DDFF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">            <\/span><span style=\"color: #89DDFF\">});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">analytics<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">subscribe<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">checkout_completed<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8\">e<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=&gt;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">if<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8\">e<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">data<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">checkout<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">order<\/span><span style=\"color: #89DDFF\">?<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">id) <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #82AAFF\">checkoutRequest<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8\">e<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">data<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">checkout<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">order<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">id<\/span><span style=\"color: #89DDFF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">})<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>6. <strong>Save the pixel<\/strong> and <strong>connect<\/strong> it.<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"template":"","ecdp-category":[],"class_list":["post-13789","ecdp","type-ecdp","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/13789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp"}],"about":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/types\/ecdp"}],"author":[{"embeddable":true,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/users\/8"}],"version-history":[{"count":2,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/13789\/revisions"}],"predecessor-version":[{"id":13807,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/13789\/revisions\/13807"}],"wp:attachment":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/media?parent=13789"}],"wp:term":[{"taxonomy":"ecdp-category","embeddable":true,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp-category?post=13789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}