Using webflow with walker.js and GA4

[Blubasur]

Hey, we are happy to announce that we recently posted a blog on our homepage describing how you can set up tracking on a webflow page with walker.js and GA4 in under 15 minutes: https://www.elbwalker.com/blog/tracking-on-webflow

The guide will help you with implementing the scripts, tagging your site, Google Tag Manager configuration, and finally show you the outcome in GA4.

We are always pleased to hear about your experience using our guides and docs to fasten up your tracking with walker.js.
Did everything work out for you or do you need more help to evaluate? Let us know in the comments!

Interested in an implementation guide but not using webflow? Lucky you!
We got some more:

Set up tracking on a single-page-application using walker.js and gatsby
Send E-Commerce events to GA4 using GTM and walker.js

[Johnsonnnnnnn]

Hi, i have followed along as done everything that was in the blog but still no dataLayer is showing with what i have implemented.

[aylaju]

Hi @Johnsonnnnnnn, please check if the data-default="true" attribute is added to the script. It's missing in the tutorial. I will update it asap.

<script async class="elbwalker" src="https://cdn.jsdelivr.net/npm/@elbwalker/walker.js@latest/dist/walker.js" data-default="true"></script>

[Johnsonnnnnnn]

Hi Ayla, Thank you so much for getting back to me! And walker is awesome. Helping me out so with tracking on Webflow. I have added the update to the script and it’s not creating the dataLayer when testing on GTM. One question I was hoping you can help me with, how can I set the values to dynamic. As when I’ve set the attribute value it’s hard coded but needs to be dynamic. Any advice would be greatly appreciated Thanks,Ben.  Ben Johnson128 City RoadLondon, EC1V 2NX http://www.gotradr.com  From: Ayla Prinz ***@***.***>Sent: Friday, December 9, 2022 10:46 pmTo: elbwalker/walker.js ***@***.***>Cc: Johnsonnnnnnn ***@***.***>; Mention ***@***.***>Subject: Re: [elbwalker/walker.js] Using webflow with walker.js and GA4 (Discussion #64)  Hi @Johnsonnnnnnn, please check if the data-default="true" is added to the script. It's missing in the tutorial. I will update it asap. <script async class="elbwalker" ***@***.******@***.***/dist/walker.js" data-default="true"></script> —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[aylaju]

Hi @Johnsonnnnnnn , glad to hear walker helps you with your tracking setup! 🤩 So the site is http://www.gotradr.com/, right? I can see the dataLayer object being created, as it should. Can you share a screenshot out of GTM or sth to specify the problem?

For dynamic values, you can just use "#", followed by the attribute name to get access to the value of the element attribute: https://docs.elbwalker.com/tagging/properties#dynamic-field-values

With "#" you can access all HTML attributes, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.
In your case you could move the data-elb-cta="title:Ready to get started?" from the section to the h1 element with data-elb-cta="title:#textContent" for instance.

Happy tagging!

[Johnsonnnnnnn]

Hi Ayla! Thanks so much for getting back to me! Really appreciate it. The Webflow page loads dynamically for what product I click on so when I test a payment on GTM tag assistant it just shows up as the same hard coded info I’ve inputted. That’s why I asked :)Thanks Ben.  Ben Johnson128 City RoadLondon, EC1V 2NX http://www.gotradr.com  From: Ayla Prinz ***@***.***>Sent: Tuesday, December 13, 2022 6:14 pmTo: elbwalker/walker.js ***@***.***>Cc: Johnsonnnnnnn ***@***.***>; Mention ***@***.***>Subject: Re: [elbwalker/walker.js] Using webflow with walker.js and GA4 (Discussion #64)  Hi @Johnsonnnnnnn , glad to hear walker helps you with your tracking setup! 🤩 So the site is http://www.gotradr.com/, right? I can see the dataLayer object being created, as it should. Can you share a screenshot out of GTM or sth to specify the problem? For dynamic values, you can just use "#", followed by the attribute name to get access to the value of the element attribute: https://docs.elbwalker.com/tagging/properties#dynamic-field-values With "#" you can access all HTML attributes, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement. In your case you could move the data-elb-cta="title:Ready to get started?" from the section to the h1 element with data-elb-cta="title:#textContent" for instance. Happy tagging! —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[Johnsonnnnnnn]

Thank you so much for you’re help! Is there somewhere where I can put a review for you 😌Also I’m stuck because each e-commerce order is dynamic on the same page. Which HTML attribute would I use for - first name, last name, email and value. Thank you so much.  Ben Johnson128 City RoadLondon, EC1V 2NX http://www.gotradr.com  From: Ayla Prinz ***@***.***>Sent: Tuesday, December 13, 2022 6:14 pmTo: elbwalker/walker.js ***@***.***>Cc: Johnsonnnnnnn ***@***.***>; Mention ***@***.***>Subject: Re: [elbwalker/walker.js] Using webflow with walker.js and GA4 (Discussion #64)  Hi @Johnsonnnnnnn , glad to hear walker helps you with your tracking setup! 🤩 So the site is http://www.gotradr.com/, right? I can see the dataLayer object being created, as it should. Can you share a screenshot out of GTM or sth to specify the problem? For dynamic values, you can just use "#", followed by the attribute name to get access to the value of the element attribute: https://docs.elbwalker.com/tagging/properties#dynamic-field-values With "#" you can access all HTML attributes, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement. In your case you could move the data-elb-cta="title:Ready to get started?" from the section to the h1 element with data-elb-cta="title:#textContent" for instance. Happy tagging! —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[aylaju]

Hi @Johnsonnnnnnn, you can tell your friends about walker.js if they want to set up analytics on their site :) also, you can star our repository to get notified once we ship updates. Above that, I am just happy to help :)

I assume you want to fire an event once a visitor loaded the order confirmation page, right? We have an example in our template gallery on how to implement this: https://www.elbwalker.com/gallery/orderSummary (click on “code in the tab menu)

You can insert data-elb-order=“id:<yourorderid>” on the respective element if your order ID is created dynamically. (If you can tag the content upfront, we have the dynamic values, https://docs.elbwalker.com/tagging/properties#dynamic-field-values)

We don’t recommend capturing personal information like email address and name for analytics purposes as it’s forbidden by law in most countries (GDPR etc.). For non-personal form-data, you can use the dynamic values, e.g. data-elb-form="title:#value" for a form entity.

I can give more advice on your implementation if you can share the URL where the event should get fired.

[Johnsonnnnnnn]

Hey, I hope you can help, when I use the total price attribute and sent it to GTM then to facebook pixel im getting a value error as the value includes GBP in the field. Is there some code I can add to the attribute to not send the GBP ? Tom @ Tradr Management Team ***@***.*** From: Ayla Prinz ***@***.***> Date: Friday, 23 December 2022 at 17:40 To: elbwalker/walker.js ***@***.***> Cc: Johnsonnnnnnn ***@***.***>, Mention ***@***.***> Subject: Re: [elbwalker/walker.js] Using webflow with walker.js and GA4 (Discussion #64) Hi @Johnsonnnnnnn<https://github.com/Johnsonnnnnnn>, you can tell your friends about walker.js if they want to set up analytics on their site :) also, you can star our repository to get notified once we ship updates. Above that, I am just happy to help :) I assume you want to fire an event once a visitor loaded the order confirmation page, right? We have an example in our template gallery on how to implement this: https://www.elbwalker.com/gallery/orderSummary (click on “code in the tab menu) You can insert data-elb-order=“id:<yourorderid>” on the respective element if your order ID is created dynamically. (If you can tag the content upfront, we have the dynamic values, https://docs.elbwalker.com/tagging/properties#dynamic-field-values) We don’t recommend capturing personal information like email address and name for analytics purposes as it’s forbidden by law in most countries (GDPR etc.). For non-personal form-data, you can use the dynamic values, e.g. data-elb-form="title:#value" for a form entity. I can give more advice on your implementation if you can share the URL where the event should get fired. — Reply to this email directly, view it on GitHub<https://github.com/elbwalker/walker.js/discussions/64#discussioncomment-4483201>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A4U72OLRNSTFS73FAG54WMLWOVXRBANCNFSM53BEPLQQ>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[alexanderkirtzel]

Hey, I assume you're using dynamic attributes to read values, right? You'd need to either set it up manually to only have the number as a value, or wait for #192 to be implemented so that you can manipulate the value. Hope that helps!