All Collections
Custom Attributes
Guide: How to use Custom Attributes (CA) in Google Tag Manager (GTM)
Guide: How to use Custom Attributes (CA) in Google Tag Manager (GTM)

This guide will show you how to use custom attributes in Google Tag Manager in order to capture prospect's data.

Salah from SalesWings avatar
Written by Salah from SalesWings
Updated over a week ago

There are two ways to send Custom Attributes with the help of GTM. In this guide, we will describe all of them :

  • Send CA with Custom event (In this case your CA will be sent as a custom event).

  • Send CA with Form-submit event (In this case your CA will be sent as form submit event. In this case event will send not only CA to SW, but Lead’s email too).

First option : Sending CA with Custom Event

Please follow the next 10 steps as explained.

(1) Open Google Tag Manager

(2) Create a new Tag in your website's container

(3) Click on Tag configuration

(4) Choose Custom HTML

(5) Add the following JavaScript snippet:

<script>
var firstName = document.getElementById("XXX").value
sw("send-custom-event",{kind:"custom-attribute", data: "", values:{first_name:firstName}});
</script>

Here we want to use a field with the first name, as an example, so we use firstName. You can use another title instead (for example, lastName for field with the last name, companySize for field with the question of quantity of employees, etc.)

NOTE: in our example we send a value called first_name. This name will be used as ID in Attribute creation in SalesWings settings. How to create CA in SalesWing settings you can read here.

Replace “XXX” with the identifier of the field of the form which you want to use as CA. The identifier can be any one of the following:

  • field id

  • field name

  • CSS selector etc.

In addition to the method querySelector you can also use other Document methods such as getElementById, getElementByClass etc.

If you don’t know how to find the attribute-name of the necessary field, please see the Appendix at the end of this guide.

The value custom-attribute (kind parameter) will be visible in the cockpit, so you can use an another name for it. The name of this value has no effect on the CA sending process.

In our example the parameter data is empty. If you want, you can add a text here or a variable from GTM to make the custom event more understandable for you.

As an example, we used a built-in variable from GTM called Page URL. You can also see how it looks in the SalesWings cockpit.

You can send several CAs as one tag. There are two options to do it:

  • If you want to use the same kind and data for all CAs, you just need to add new values separated by comma and don’t forget to create a new variable for the field that you want to send.

  • If you want to send different kind and data for different CAs, you can use SW function twice.

(6) Go to “Triggers"

(7) Choose the Form Submission trigger

(8) Select “All forms” or define with “Some forms” where/when the trigger should fire

(9) Save your tag

(10) Don’t forget to Submit all your changes in order to publish the changes to your website

To see your CA in the SalesWings cockpit, you have to create Attributes in SalesWings settings. You can read more about it here.


Second Option : Sending CA with Form-submit Event

(1)Open Google Tag Manager

(2)Create a new Tag in your website's container

(3)Click on Tag configuration

(4)Choose Custom HTML

(5)Add the following JavaScript snippet:

<script>

var email = document.getElementById("***").value

var firstName = document.getElementById("XXX").value
sw("send-form-submit",{email:email, values:{first_name:firstName}});
</script>

Here we want to use a field with the first name, as an example, so we use firstName. You can use any variable name instead of it (for example, lastName for field with the last name, companySize for field with the question of quantity of employees, etc.)

NOTE: in our example we send a value called first_name. This name will be used as an ID in Attribute creation in SalesWings settings.

Replace “XXX” with the identifier of the field of the form which you want to use as CA and replace “***” with the identifier of the email-address field of the form. The identifier can be any one of the following:

  • field id

  • field name

  • CSS selector etc.

In addition to the method querySelector you can also use other Document methods such as getElementById, getElementByClass etc.

If you don’t know how to find the attribute-name of the necessary field, please see the Appendix at the end of this guide.

You can send several CAs as one tag. To do it you just need to add new values separated by comma and don’t forget to create a new variable for the field that you want to send.

(6) Go to “Triggers”

(7) Choose the Form Submission trigger

(8) Select “All forms” or define with “Some forms” where/when the trigger should fire

(9) Save your tag

(10) Don’t forget to Submit all your changes in order to publish the changes to your website

To see your CA in the SalesWings cockpit you have to create Attributes in SalesWings settings. You can read more about it here.

Appendix: How to find the attribute-name of the necessary field ?

(1)Go to your website

(2)Open the page where form that you want to track is located

(3)Open Developer Tools (Shift + CTRL + J (on Windows/Linux) or Option + ⌘ + J (on MacOS))

(4)Inspect the relevant field (click on Inspector icon in Dev Tool, then guide the cursor on the field you want to inspect and click on it)

(5)Copy the name of the attribute (we use id of the field in our example, it is highlighted in the screenshot. You can also use the class of the field, name, etc.)

Did this answer your question?