In the last post we used the WPFusion Javascript API and Google Tag Manager to dynamically apply tags when a customer clicked on the ‘Add To Cart’ button.

In this article we are going to send custom field data to our CRM when a user clicks on a button.

Although this can be done with one of WPFusions ‘Lead Generation’ integrations (such as Gravity Form), this new method does not require the user to submit a form, thereby reducing the number of steps and increasing the conversion rate.

It’s great for simple, one-off, yes/no type questions as you start to build up more information about your website visitors.

For this tutorial, we have created a simple demo for a real estate site that asks the question ‘What is your Primary Role?’, along with two buttons ‘BROKER’ and ‘BUYER’. Each button has a unique CSS class of the same name.

In the CRM we created a custom field called ‘Primary Role’ and upon click this field is filled with the appropriate value (Broker/Buyer).

Step 1 – Locate the Variable Value

 

Enable the Google Tag Manager Preview and return to your website.

Click on either of the buttons and then select the ‘gtm.click’ event from the left hand sidebar, then click on the ‘Variables’ tab.

In the ‘Click Classes’ variable we can see our unique CSS class of ‘broker’.

 

Now let’s use this to create the trigger…

Step 2 – Create the Trigger

Go to ‘Triggers’.

Click on ‘New’ and call the trigger ‘CC – Broker’.

Use the ‘Trigger Type’ of ‘Click – All Elements’ and set the trigger to fire on ‘Some Clicks’, when the ‘Click Classes contains ‘broker’:

Save the trigger, and repeat again for the ‘Buyer’ button:

Now we are ready to create the GTM tags:

Step 3 – Create the Tags

 

Go to Tags -> New and call it ‘Primary Role – Buyer’

For the tag type choose ‘Custom HTML’

And paste in the following code:

 

To adjust the script for your own scenario simple change the name of the custom field from ‘primary_role’ to match the field you have created in your CRM, likewise with the custom field value. The trigger for this tag is ‘CC – Broker’:

 

 

Now repeat the same for the ‘Buyer’ button by creating a new tag and be sure to change the value of the custom field to ‘buyer’:

Step 4 – Testing

 

Refresh the preview in Google Tag Manager and your webpage.

Click on the ‘BROKER’ button and you should see it listed in the Summary.

Do the same for the ‘BUYER’ button.

If they show up under ‘Tags Fired’ everything is working 😉

Conclusion

 

The WPFusion Javascript API can be used to update custom fields without a form submission. This can be useful when you want to gather information from your potential customers in a quick and easy format. It also removes the need to to click on a ‘Submit’ button, reducing the number of steps and increasing conversions.

Adding Google Tag Manager into the mix makes it straightforward for non-developers to quickly implement variables and triggers without any additional coding. This adds unparalleled flexibility to the already powerful feature set of WPFusion.

Luke Stacey leads the Marketing Automation team at WPLaunchify.com and publishes regular tutorials at WPAutomationLab.com Get in touch via help@wplaunchify.com or connect on LinkedIn.

Share This