Get product id from script tag

[jonathanjm]

Hi!

I'm developing a public app where I want to display a pop up on specific product pages.

To do this I inserted a script tag using the Script Tag API and want to do a call from it to my server passing the product id to check if that product should or not display the popup.

I need a reliable way of getting the product. I did some googling and found some answers saying that you can use the url slug getting it with window.location.pathname, but that's not always reliable. Then I was inspecting the product page and found the ShopifyAnalytics object where I can get ShopifyAnalytics.meta.page.pageType  and ShopifyAnalytics.meta.product.id. 

So my question is, can I rely on the ShopifyAnalytics object to always be on the product page and for all merchant stores?

Am going about this the right way? or is there a better approach to knowing when a customer is on a specific product page?

Thanks!

[Visely-Team]

ShopifyAnalytics.meta.product.id is successfully being used by many apps, though undocumented and can change in the future. The slug is a better solution, not sure why you are saying it's not that reliable, is it because the slug can change?

A rock solid alternative would be to add your own custom snippet into say product.liquid and expose the product id explicitly:

<script>
  var myVeryOwnProductId = '{{product.id}}';
</script>

but this implies you have to inject the code into liquid templates.

[jonathanjm]

@Visely-Team

@SBD_ 

Thanks!

I'm trying to avoid having the user inject code. I'll go with the slug approach and get the product JSON.

[Hasimew]

Hello,

 Did your app finally work? is YES, what is it called?

[ShopSappers]

@Visely-Team adding explicit {{product.id}} via liquid output to js in product.liquid have difficulties with the introduction of Shopify theme 2.0 Because product.liquid is no more present for 2.0 themes.
Since the templates are json files you can't add any js or html to product.json template, which will result in theme break.

So you have to either add it in main-product.liquid section or to the theme.liquid layout of course with if product check condition.

I'm adding this reply just for any new comers who seeks for such solutions.

[SBD_ · Accepted solution]

Hey @jonathanjm,

can I rely on the ShopifyAnalytics object to always be on the product page and for all merchant stores?

No, this could change.

getting it with window.location.pathname, but that's not always reliable

Can you elaborate? I might be missing something but you should be able to search for `/products/` in window.location.pathname to detect a product page and find the handle.

There are a few ways you could approach this, each with their own trade-offs:

- Store handles in your database instead of IDs, but you'll need to keep these in sync (handles can change).

- Get the JSON of a product, which will reveal the ID, but an additional request on every product page is slow and can lead to other issues.

- Add some JS to the theme which passes product IDs to your app, but this requires modifying the theme.

- Use metafields to keep track of which products should display a popup. This avoids having to hit your server each time, but also requires modifying the theme.

The best approach will depend on how the app works.