HOW ARE YOU SUPPOSED TO TRACK ADD TO CARTS WITH THE SHOPIFY EMBED BUTON

Matty_Boi
New Member
8 0 0

Here's the problem... 

We are embeding the shopify button to pages. 

The customer clicks the button and the cart opens in a side window within the main window. 

We can not get the inline action to work to fire the pixel and we can not get the cart to open in a new tab or open the cart page URL in the same window.

This is fucking crazy!!  How do Shopify expect people to track the add to carts with the Facebook pixel. 

If anyone can help either with the inline event fire on the button click 

OR 

Make the cart url open full screen OR in a new tab 

I would be sooo happy. 

Here is an example page with the button embeded...

>> https://qsppixelstore.myshopify.com/pages/example-cart-button

And here is the button embed code..

 

<div id='product-component-d17ce18eee8'></div>
<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'qsppixelstore.myshopify.com',
      apiKey: 'cb760c575f5deae2db774f074c1510d2',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [13088573515],
        node: document.getElementById('product-component-d17ce18eee8'),
        moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "width": "240px",
    "contents": {
      "img": false,
      "imgWithCarousel": false,
      "title": false,
      "variantTitle": false,
      "price": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "variantTitle": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

0 Likes
Jason
Shopify Expert
10360 158 2010

Are you using the Buy Button within a Shopify store vs using it on a third party site? What's the reasoning behind that - or is that just to explain things for this post?

If you find the Buy Button doesn't give you enough control, there's are other options like:

  • JS BUY SDK
  • Storefront API
  • Editing your theme to have a built in button for purchase and skip the buy button widget.

All of the above would let you add custom code to trigger whatever event you need. Those options not suitable for you?

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Matty_Boi
New Member
8 0 0

Hey Jason, 

We have developed an app that builds long sales pages so we have lots of users embeding the shopify buy button, we found the problem which is that the shopify button is in a iframe and hosted with shopify so there is no button click, which means you can't do an inline event with the Facebook pixel.

This is a major floor in using the button which only Shopify can change. 

Giving admin the option to open the actaull cart page in a full window would solve it OR giving admin a chance to add their pixel id at the time of generating the button code would also help.

The only way you can get the inline event to fire the add to cart pixel is by activating it when some one clicks the iframe which is not 100% because if you have veriants and a user click the dropdown menu or any where in the iframe it will give you a add to cart fire which is not 100% accurate. 

We have finally managed to come up with some code to add to the button which effectivly adds the product to the cart - by passes the cart and opens the checkout in a full window and fires the add to cart.

But this is still not ideal as its not the cart and doesnt give the user a chance to add more products and continue shopping. 

Here is an example page of that in action...

>> https://qsppixelstore.myshopify.com/pages/duvetcovertemplate

The embed button really is flawed, I can't imagine any one in this day and age who would not want to track add to carts with out being a programming wizard. 

We have had a team of programmers looking at this for over a week now and it would be super easy for Shopify to get it working 100% 

Thanks Jason, do really appriacate you reaching out on this though its been a real challange :) 

0 Likes
Matty_Boi
New Member
8 0 0

Here's where we're at now incase it helps anyone: https://youtu.be/X4qf1Q-MxVM

 

0 Likes