--- updatedAt: 2025-11-13T14:09:25.000Z agentTools: siteIndex: https://docs.affirm.com/llms.txt projectIndex: https://docs.affirm.com/developers/llms.txt --- # Set Up Google Tag Manager Learn how to set up Google Tag Manager for your site to manage tracking, advertising, and other marketing functions on your site. ## Prerequisites * Create a [Google Tag Manager](https://tagmanager.google.com/) account.
## Steps ### 1. Upload the Custom Template 1. Download the template.tpl file from [Github](https://github.com/Affirm/example-code). 2. Open [Google Tag Manager](https://tagmanager.google.com/). 3. Click on the **Templates** tab. 4. In the **Tag Templates** section, click **New**. In the Templates tab, a Tag Templates section contains a button called New. 5. Click the three-dots icon to expand the menu. 6. Click **Import**. Import option on menu 7. Select the template.tpl file that you downloaded from Github in Step 1. 8. Click **Save**. ### 2. Add a Tag 1. Open [Google Tag Manager](https://tagmanager.google.com/) for your Workspace. 2. Click on the **Tags** tab. 3. Click **New**. In the Tags tab, the Tag section features a New button. 4. Click on the **Tag Configuration** section. 5. In the **Custom** section, click **Affirm**. 6. Click on the **Triggering** section. 7. Select **All Pages**. 8. Click **Add**. All pages are selected and Add button is shown 9. Click **Save** to save the tag configuration. ### 3. Configure the API Key 1. In the **Tags** section, click to open the tag. 2. Click on the **Tag Configuration** section. Tag Confirmation section with Tag Type, Affirm Configuration, Payment Button, Logo Color, and Position subsections. 3. In the **Affirm Configuration** sub-section, add your public API key in the **Affirm Public API Key** field. 4. Select the type of API key you’re using: 1. Sandbox for testing. 2. Production to create actual loans. ### 4. Configure Promotional Messaging You can add as-low-as messaging and logos to your site with minimal effort: * **Promotional Message:** This targets one element on a page. * **List of Promotional Messages:** This is for when there are similar elements on one page that you want to target. There must be the same number of instances of classes in the **Target Element** field that there are in the **Price Element** field. * **Logo:** This displays a logo anywhere on your site. {`

Add a Promotional Message

  1. Click the Promotional Messaging sub-section.
  2. Click Add Row in the Promotional Message row.
  3. In the Target Element field, select the HTML class or ID to identify where to display the promotional message.
  4. In the Price Element field, select the HTML class or ID of the element that includes the price.
  5. Select a Page Type to indicate where the promotional messaging should display.
  6. In the Affirm Type field, you can select either:
    • Logo: Displays the Affirm logo in promotional messaging. You can also choose a logo color.
    • Text: Displays “Affirm” as text in promotional messaging.
  7. Select a Position in Target option to indicate the position of promotional messaging relative to the Target Element.

Add a List of Promotional Messages

  1. In the Promotional Messaging sub-section, click Add Row in the List of promotional messages row.
  2. In the Target Element field, select the HTML class to identify where to display the promotional messaging.
  3. In the Price Element field, select the HTML class of the element that includes the price.
  4. Select a Page Type to indicate where the promotional messaging should display.
  5. In the Affirm Type field, you can select either:
    • Logo: Displays the Affirm logo in promotional messaging. You can also choose a logo color.
    • Text: Displays “Affirm” as text in promotional messaging.
    • Select a Position in Target option to indicate the position of promotional messaging relative to the Target Element.

`} ### 5. Configure the Credit Card Form Fields When the customer completes their Affirm checkout, we return them to your checkout page. At that time, a success callback function is triggered and the generated debit card details are included in the success callback event data. To configure this checkout flow, you must: 1. Store the virtual card details returned from Affirm. 1. Populate hidden credit card form fields so they can be leveraged by the standard 'submit' action , or 2. Immediately make the API call to tokenize the card, in anticipation of authorization in a subsequent step. 2. Submit the in-progress checkout form on your site (either user-initiated or automatic). 1. Customer must click the 'place/finalize/complete order' button to complete the order, or 2. Automatically submit the checkout form after the Affirm checkout has been confirmed. 3. Put a pending authorization hold on the funds on the virtual card. 1. Use your checkout form's existing functionality to submit the debit card details to your card gateway for authorization. 2. Directly submit the debit card details to your card gateway for authorization at runtime, instead of using the existing card-submit-for-authorization mechanism. ### 6. Configure Checkout 1. In the **Merchant Name** field, enter the name of the merchant. 2. In the following sections, enter HTML class or ID where the associated values are on the checkout page: 1. **Items**. Note: The **Item Container** must be an element that surrounds the following fields. 2. **Billing**. 3. **Shipping**. 3. In the **Payment Button** section, you can configure a button for the payment types section of your checkout: 4. In the **Target Element** field, choose the HTML class to identify where the button should show. 5. In the **Payment Description** field, you can customize the message. We suggest using **Monthly Payments**. 6. In the next field, you can choose whether Affirm appears as a logo or text in the button. 7. In the **Logo Width** field, enter the width that you’d like the logo to display as, in pixels. Don’t append “px” to the number (e.g., For 200 pixels wide, enter “200”). 8. In the **Color** field, select a logo color. 9. Select a **Position** option to indicate the position of promotional messaging relative to the **Target Element**. 10. In the **Card Output** section, enter the HTML class or ID with the corresponding hidden credit card form fields. 11. In the following fields, select the HTML class or ID where the amount is located: 1. **Shipping Amount** 2. **Tax Amount** 3. **Total Amount** 12. In the **Submit Element** field, choose the HTML class or ID of the button to submit an order. ### 7. Integrate 1. Click the name of the container you’re currently editing, such as: 2. GTM-WFLMNVK In the modal window, copy the embed code snippets for heading and body, and paste them into your page’s heading and body. Install Google Tag Manager. First field is for HEAD code and second field is for BODY. 3. For more information, you can refer to [Google's quickstart guide](https://developers.google.com/tag-manager/quickstart). 4. Test the integration by providing your Affirm contact with a test card number that can be successfully authorized. See an example on [Github](https://affirm.github.io/example-code/gtm/sample.html). # Sibling pages * [About Promotional Messaging and Prequalification](https://docs.affirm.com/developers/docs/about-promotional-messaging-and-prequalification.md) * [Set Up Promotional Messaging](https://docs.affirm.com/developers/docs/set-up-promotional-messaging.md) * [Manage Promotional Messaging Components](https://docs.affirm.com/developers/docs/manage-components.md) * [HTML Reference: Promotional Messaging](https://docs.affirm.com/developers/docs/html-reference-promotional-messaging.md) * [About Google Tag Manager](https://docs.affirm.com/developers/docs/google-tag-manager.md) * [Marketing and Compliance](https://docs.affirm.com/developers/docs/email-marketing.md)