Adjust Web SDK and Google Tag Manager integration

This guide explains how to use the Adjust Web SDK with Google Tag Manager (GTM), including setup for loading, initializing, and tracking events.

Load and initialize the Web SDK

The following steps create a single GTM tag that loads and initializes the Adjust Web SDK.

1. Create a Custom HTML Tag

Give the tag a descriptive name, for example: Adjust Web SDK - Load and Initialize.

2. Add the SDK Loader Snippet

Within the GTM Custom HTML tag, add one of the following loader snippets.

Automatic SDK update approach

This approach uses adjust-latest.min.js to always get the most recent Adjust Web SDK version.

Action: Copy the following SDK loading snippet and paste it into the GTM Custom HTML tag.

1
<script type="application/javascript">
2
!function(t,r,e,a,n,o,i,l,c,s,d,h,u){var f=i+"_q",m=i+"_c";t[i]=t[i]||{},t[f]=t[f]||[],t[m]=t[m]||[];var p=function(a,n,r){a[r]=function(){n.push([r,arguments])}};for(var g=0;g<l.length;g++)p(t[i],t[f],l[g]);for(var v=0;v<c.length;v++){var y,E=c[v][0],_=[].slice.call(c[v][1]);t[i][E]=function(){var e=arguments;return y=this,t[m].push(function(){y[s]=new(Function.prototype.bind.apply(t[i][E],[null].concat(Array.prototype.slice.call(e))))}),y};for(var g=0;g<_.length;g++){(function(e){t[i][E].prototype[e]=function(){var n=arguments;t[m].push(function(){y[s][e].apply(y[s],n)})}})(_[g])}}h=r.createElement(e),u=r.getElementsByTagName(e)[0],h.async=!0,h.src="https://cdn.adjust.com/adjust-latest.min.js",h.onload=function(){for(var r=0;r<t[m].length;r++)t[m][r]();t[m]=[];for(r=0;r<t[f].length;r++)t[f][r][1][0]&&t[f][r][1][0][s]?t[i][t[f][r][0]](t[f][r][1][0][s]):t[i][t[f][r][0]].apply(t[i],t[f][r][1]);t[f]=[]},u.parentNode.insertBefore(h,u)}(window,document,"script",0,0,0,"Adjust",["initSdk","getAttribution","getWebUUID","waitForAttribution","waitForWebUUID","setReferrer","trackEvent","addGlobalCallbackParameters","addGlobalPartnerParameters","removeGlobalCallbackParameter","removeGlobalPartnerParameter","clearGlobalCallbackParameters","clearGlobalPartnerParameters","switchToOfflineMode","switchBackToOnlineMode","stop","restart","gdprForgetMe","disableThirdPartySharing","trackThirdPartySharing","initSmartBanner","showSmartBanner","hideSmartBanner"],[["ThirdPartySharing",["addGranularOption","addPartnerSharingSetting"]]],"__realObj");
3
</script>

Specific SDK version approach with Subresource Integrity (SRI)

This approach loads a specific SDK version and uses Subresource Integrity (SRI). It uses a version-specific src URL with an integrity hash and crossOrigin attribute. These elements enable the browser to verify that the script has not been altered. This method requires manual updates to receive new SDK versions.

Action: Copy the following SDK loading snippet and paste it into the GTM Custom HTML tag.

1
<script type="application/javascript">
2
!function(t,r,e,a,n,o,i,l,c,s,d,h,u){var f=i+"_q",m=i+"_c";t[i]=t[i]||{},t[f]=t[f]||[],t[m]=t[m]||[];var p=function(a,n,r){a[r]=function(){n.push([r,arguments])}};for(var g=0;g<l.length;g++)p(t[i],t[f],l[g]);for(var v=0;v<c.length;v++){var y,E=c[v][0],_=[].slice.call(c[v][1]);t[i][E]=function(){var e=arguments;return y=this,t[m].push(function(){y[s]=new(Function.prototype.bind.apply(t[i][E],[null].concat(Array.prototype.slice.call(e))))}),y};for(var g=0;g<_.length;g++){(function(e){t[i][E].prototype[e]=function(){var n=arguments;t[m].push(function(){y[s][e].apply(y[s],n)})}})(_[g])}}h=r.createElement(e),u=r.getElementsByTagName(e)[0],h.async=!0,h.src="https://cdn.adjust.com/adjust-5.7.2.min.js",o&&(h.crossOrigin="anonymous",h.integrity=o),h.onload=function(){for(var r=0;r<t[m].length;r++)t[m][r]();t[m]=[];for(r=0;r<t[f].length;r++)t[f][r][1][0]&&t[f][r][1][0][s]?t[i][t[f][r][0]](t[f][r][1][0][s]):t[i][t[f][r][0]].apply(t[i],t[f][r][1]);t[f]=[]},u.parentNode.insertBefore(h,u)}(window,document,"script",0,0,"sha384-3BJePftWPBpqzii4G4Z1wjO/OaXCIpqAZ/4hbIB8KGBvrmSwZQLUflAaqRa2poWO","Adjust",["initSdk","getAttribution","getWebUUID","waitForAttribution","waitForWebUUID","setReferrer","trackEvent","addGlobalCallbackParameters","addGlobalPartnerParameters","removeGlobalCallbackParameter","removeGlobalPartnerParameter","clearGlobalCallbackParameters","clearGlobalPartnerParameters","switchToOfflineMode","switchBackToOnlineMode","stop","restart","gdprForgetMe","disableThirdPartySharing","trackThirdPartySharing","initSmartBanner","showSmartBanner","hideSmartBanner"],[["ThirdPartySharing",["addGranularOption","addPartnerSharingSetting"]]],"__realObj");
3
</script>

To update the SDK version in the future:

1. Update the src attribute with the new SDK version number (e.g., adjust-5.7.2.min.js).
2. Update the integrity hash. The INTEGRITY hash file corresponding to the Adjust Web SDK Github release contains this value.

3. Add the SDK Initialization Code

Immediately after the loader snippet, add the following initialization code within the same GTM Custom HTML tag:

1
<script>
2
// --- Initialize the Adjust SDK ---
3
Adjust.initSdk({
4
  appToken: "YOUR_APP_TOKEN", // Required: Replace with your Adjust App Token
5
  environment: "sandbox"      // "sandbox" for testing, "production" for live
6
});
7
</script>

The complete Custom HTML tag will contain the chosen SDK loader snippet followed by this initialization snippet.

4. Configure Tag Firing Options and Trigger

1. In the GTM tag configuration, expand Advanced Settings and for Tag firing options, select Once per page.
2. Click on the Triggering section and select the All Pages (Page View) trigger.
3. Save the Tag.

The tag should look like this:

Your GTM tag will now load and initialize the Adjust Web SDK based on your chosen approach and trigger.

Track event

1. Create a New Custom HTML Tag

1. In your GTM container, navigate to Tags and click New.
2. Name your tag descriptively (e.g., “Adjust Event - User Registration”).
3. Click Tag Configuration and choose Custom HTML.

2. Add the Event Tracking Snippet

Add the following snippet into the HTML field:

1
<script>
2
  Adjust.trackEvent({
3
    // Required: Replace "EVENT_TOKEN" with your specific Adjust event token.
4
    eventToken: "EVENT_TOKEN",
5

6
    // Optional for revenue/currency: uncomment lines below.
7
    // revenue: {{DLV - Transaction Revenue}},
8
    // currency: {{DLV - Transaction Currency}}
9
  });
10
</script>

3. Configure a Trigger

Configure a trigger to fire this event tag based on a specific user action. Below are two common examples.

Example: Track a form submission (e.g., user registration)

1. Create a new trigger and name it (e.g., “Registration form submitted”).
2. Choose Form Submission as the trigger type.
3. Under This trigger fires on, select Some Forms.
4. Define a condition to identify your form (e.g., Form ID equals registration-form).
5. Save the trigger.

Example: Track an event driven by Data Layer (e.g., purchase with revenue)

This method is used for events like purchases signaled by your website pushing information to the Data Layer.

1. Create a new trigger and name it (e.g., “Purchase completed”).
2. Choose Custom Event as the trigger type.
3. In the Event name field, enter the exact name provided by your development team (e.g., purchase_completed).
4. Under This trigger fires on, select All Custom Events.
5. Save the trigger.

Here is the trigger configuration for the example user registration event:

4. Set Tag Sequencing

1. In the event tag’s Advanced Settings, find Tag Sequencing.
2. Enable Fire a tag before [Your Event Tag Name] fires.
3. For Setup Tag, select your “Adjust Web SDK - Load and Initialize” tag. This ensures the SDK is loaded before any events are tracked.
4. Save the Event Tag.

Here is the tag configuration for the example user registration event:

Set up GTM variables for dynamic data

If your event includes dynamic data like revenue, you can use GTM Variables to read values from your website’s Data Layer. This assumes the Data Layer is configured to provide this data. For developer guidance, see Google’s documentation.

To create a Data Layer Variable in GTM:

1. Navigate to Variables and click New under User-Defined Variables.
2. Name your variable (e.g., DLV - Transaction Revenue). This is the name used in your tag snippet (e.g., {{DLV - Transaction Revenue}}).
3. Choose Data Layer Variable as the Variable Type.
4. In the Data Layer Variable Name field, enter the exact key name used in the Data Layer (e.g., transaction_total).
5. Leave Data Layer Version set to Version 2.
6. (Optional) Set a Default Value if the variable might not be present.
7. Save the variable.

Repeat these steps for each piece of dynamic data. Once created, you can use them in your Adjust event tag.

Here is the variable configuration for the example: