Before getting started:

  1. To complete this setup, you will need to request an API Secret from the Gatsby team. Please reach out to us to receive it.
  2. Add a field to a form on your website to collect instagram handles. Most common forms to add this field include: registration forms, checkout flows, and order confirmation pages. Take note of the name / ID for that Instagram field, as well as the name / ID for the Email Address field, as you will need both of those at the end. For example, those names / field IDs may be: "email" and "ig_handle".

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]';
// use the provided APIs to do things like send pixels
if (data.UserName && data.EmailAddress) {
         const url = ''+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* 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 the variables from your website back to GTM by pasting the following code on your website:

On the submit action of the form fields, paste:

window.dataLayer = window.dataLayer || [];
'EmailAddress': email,
'UserName': ig_handle

And just be sure to replace the bold fields with the specific names / IDs you created for the Instagram and Email Address fields in the form, as mentioned before step 1 at the top of this guide.

Let us know any questions!

Did this answer your question?