Conversion tracking

Technical Questions
1

What are you trying to accomplish
I want to put a tag on my order confirmation screen but the documentation for the “conversion tracking” does not explain how to do this.

  1. How do I include the SDK JS for something like google tag manager
  2. How do I attribute conversion to specific campaigns?
  3. How do I include my API key?

This is NOT a react or dynamic web app, its just normal HTML/CSS/JS

2

Hi @Jeff !

There is a way to include something like GTM within a Builder page using a Custom Code block, as shown here: Is there a good way to include Facebook Pixel or Google Analytics Events in Builder?

But I actually think it sounds like in this case the best way would be to set up GTM within your app itself. With 3rd party analytics trackers like GTM, Builder is totally agnostic, which is to say that as long as you have it set up in your app then Builder shouldn’t really interfere or interact with GTM. For setting up Tag Manager, I would recommend looking at Google’s docs: Setup and install Tag Manager - Tag Manager Help

As they will most likely be able to best assist you. Let me know if that answers your question or if we can help further!

3

Hi Tim-

In setting up the tag manager I am trying to set up the trackConversions. I cobbled this together and don’t see any errors but I also don’t see anything sent back to Builder.

This script is in my GTM for my non-builder confirmation page.

<script async src="https://cdn.builder.io/js/webcomponents">
import { builder } from 'https://cdn.builder.io/sdk'
builder.init(MyAPIKey);
builder.trackConversion(99.99); 
</script>

Any ideas?

Jeff

4

Hi @Jeff, hmm interesting, do you have a jsbin / codesandbox / anything live/online we can run ourselves to test it out a bit more?

As I mentioned above, I still think it might be best if you are able to include the trackConversion calls within your app, even if outside of Builder pages. Maybe something like what is shown here: Conversion tracking with Builder.io - Builder.io

Let us know if that works for you! And of course if you have a sandbox environment we could check out your exact set up that would help us to debug further

5

Hello @TimG, thanks for the reply.

Yes, I do have something temporary online you can see…

  1. Go to: Jeff_builder1 | Quicken
  2. click the “click me” button.
    That will take you to the next page that has the conversion code on it.

Is this working? How would I know that any conversion was tracked?

6

Hi @Jeff ,

I was able to connect with our dev team and get some guidance. I think what you want on your non-builder page is something more like:

<script async src="https://cdn.builder.io/js/webcomponents"></script> 
<script> 
    window.builderWcLoadCallbacks = window.builderWcLoadCallbacks || []; 
    window.push( function (context) { 
         context.builder.init('<the API key goes here>'); 
         context.builder.trackConversion(99); 
     } ); 
</script>

The first <script/> will asynchronously load the Builder WebComponents API, the second adds a callback that will be run when our WebComponents API is all loaded. Inside the callback, we need to set the API key, and then that’s when you will be able to call anything on context.builder (like in this case, the trackConversion() call)

Try that out and see if it works for you!

7

This works great. Thanks for the help.

1 Like
8

@TimG

This does not seem to work for us when we used this code. We get console errors.

image-20240404-132904
image-20240404-132904817×191 13.9 KB

Has this approach changed?

9

@peter.mcelroy looking at it now I think it should be:

<script async src="https://cdn.builder.io/js/webcomponents"></script> 
<script> 
    window.builderWcLoadCallbacks = window.builderWcLoadCallbacks || []; 
    window.builderWcLoadCallbacks.push( function (context) { 
         context.builder.init('<the API key goes here>'); 
         context.builder.trackConversion(99); 
     } ); 
</script>

Also keep in mind this needs to be called within the browser window, so if your window is undefined that could also be an issue