Add hidden cart attribute through script to track actions

[noah_haub]

Hello,

I'm currently building a tracking software for e-commerce brands.

I want to provide a JS script that Shopify store owners can add to the head tag of their website. (Just like google analytics for example).

And with that script, I want to be able to track when someone adds a product to their cart or places an order. After looking online for a little over a week now I found the solution that I can add a specific tracking ID as a hidden cart attribute to the cart which makes it possible for me to track 'who' made that purchase on the post-purchase page by accessing the order object.

But I can't seem to figure out how to actually add that tracking parameter as an attribute. Do you guys know how I could do that? How would I know when someone adds something to their cart? And how can I then add the cart attribute to that cart?

I would really appreciate any kind of help on this since I've been stuck with this problem for over a week now and can't come up with a solution.

I hope you understood my question. In case you want me to specify something please let me know.

Looking forward to your reply.

Kind regards, 
Noah Haubenreiser

[buildpath · Accepted solution]

Hey Noah, I'm actually in the process of building something similar for a client and arrived at the same solution; using cart attributes to track. This is why you see attribution tools like TripleWhale use a triple_id cart attribute for orders their system is tracking so you can get better attribution across various paid ad platforms vs just checking the platform reports directly. 

What I did was use the small library Cart.js. You pass the desired attributes to Cart.js and it handles adding those to Shopify via API. You could do it from scratch using their Cart API documentation but it's way easier using this lightweight library. I guess you'd just want to have your app check to see if Cart.js is loaded already by the merchant's theme before you load it again.

Also rather than having merchants manually add  your tag, you could use Shopify's ScriptTag resource to add automatically when merchant installs your app. When they uninstall, it's automatically deleted from their site.

[noah_haub]

Wow, awesome man! I really appreciate your help. That library is perfect!!

Thank you so much for your answer you really helped me a ton.

[buildpath]

Noah, glad to help! Have fun on your project

[JaydenLNext]

Hey Noah! 

It seems we had a similar question.  I've been able to add hidden cart attributes with no issue. However, I'm wondering how you retrieved those hidden order attributes?

The docs don't mention if hidden cart attributes are returned when you request an order, but I assume they would have to be. Interested in how you went with it?  Thanks.

[noah_haub]

Hey Jayden,

I didn't work with the API regarding retrieving the attributes.

I simply got the order object on the order status page which includes the cart attributes.

[JaydenLNext]

Ok cool. Thanks for the reply! 

[Metz]

Jayden, may I ask how you add hidden cart attributes? I'm a Shopify newbie and am trying to add a cart attribute via a link on another page. I hope that makes sense. 😃