Implementing the 'add_to_cart' data layer via SEOmatic

[sm9]

A client of ours has recently asked us to implement the 'add_to_cart' data layer on their website, so they can track conversions.

We did this using the SEOmatic script on the product template:

{% do seomatic.script.get('googleTagManager').dataLayer({
  'event': 'add_to_cart'
}) %}

However, they've pointed out that this is now firing every time a user visits the template, rather than specifically when users click the Add to Cart button.

Do you have any advice on how best to implement this with SEOmatic? We wondered if there was another hook we can use in SEOmatic, or would you recommend using a custom module to hook into a Craft Commerce event, or even doing this via JavaScript instead?

We're using Craft CMS 4.10.2, Craft Commerce 4.6.3.1, and SEOmatic 4.0.50.

Thanks for any advice,

Stephen

[khalwat]

So implementing it with SEOmatic shouldn't be any different than implementing it on your own via JavaScript. The primary functionality that SEOmatic adds is just making whatever tracking script you've chosen it loaded in your templates.

So you'd just do what you're attempting to do via regular old JavaScript interacting the the data layer, just as you would if you manually loaded the Google Tag Manager or gtag script yourself.

[sm9]

Hi Andrew, thanks for this - it sounds like this is simpler than what we thought! :) Thanks, Stephen

[khalwat]

Yeah just think of the Tracking Scripts section of SEOmatic as something that will load the appropriate scripts for you with whatever default values you need. But then it's just working with that vendor's script & API from there on out.