Note: to complete this setup, you will need to request an API Secret from the Gatsby team. Please reach out to us to receive it.

Step 1: Create Tag Template

  • Please navigate to the tag template under the Template section in Google tag manager

Create new tag template and call it Gatsby Script Tag

  • Navigate to the Fields tab and add two "Text Input" fields for EmailAddress and UserName. (can be two words as well, ie "Email Address". 
  • Add Validation Rules via the gear icon
  • Then navigate to Code tab and place the below code right after the line where it says // "Enter Your Template Code Here" replacing what's already in there.

Note: also be sure to add your secret API key that you've received from us.

const sendPixel = require('sendPixel');
          const encodeUriComponent = require('encodeUriComponent');
          const log  = require('logToConsole');
          const secret = '[your "secret" api key, ask us for yours]';
          data.gtmOnSuccess();
// use the provided APIs to do things like send pixels
if (data.UserName && data.EmailAddress) {
         const url = 'https://gatsby.tech/tagmanager?email='+encodeUriComponent(data.EmailAddress)+'&username='+encodeUriComponent(data.UserName)+'&secret='+encodeUriComponent(secret);
          sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);
        }

  • Then navigate to the permission tab 
  • Hit "Refresh" next to Template Preview

  • A new field will appear, Sends Pixel
  • Add the permission url https://gatsby.tech/* to the Sends Pixel field
  • Click Save on the top right

Step 2: Create Variable

  • Click X next to Template Editor / navigate back to the home view
  • Go into the Variables tab
  • Click "New" under User-Defined Variables
  • Name it EmailAddress on the top left and click the Pencil icon to choose the Variable Type
  • Choose Data Layer Variable
  • Set Data Layer Variable Name to EmailAddress
  • Click Down on Format Value and select Change Case to Lower Case
  • Click Save
  • Repeat those steps for UserName

Step 3: Create Trigger

  • Navigate to the Triggers Tab
  • Select New Trigger, name it Gatsby, and choose Form Submission
  • Click Save

Step 4: Create Tag

  • Navigate to the Tags tab, and create a new tag called Gatsby Script Tag
  • Select the pencil on Tag Configuration, and choose the tag type that we created in the first step "Gatsby Script Tag"
  • Click the + icons next to the Email Address and UserName fields and select their corresponding variables that we created:

  • Under Triggering, click the pencil and select the trigger "Gatsby" that we created in the third step
  • Click save and paste the GTM script on your website (if it's not on your site already)

Step 5: Pass Variables

  • On form submit, pass the variables to the data layer . Eg: Sample code:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'EmailAddress': 'xyz@yahoo.in',
'UserName': 'xyzusername'
})

The value will pass to the datalayer and the datalayer will pass the value to Gatsby.

Did this answer your question?