Tracking Single Page Application Events with Google Tag Manager

To create a universal pixel in Basis:

1. Go to the media plan:

   1. Go to Main Menu [] > Campaigns.
   2. Select the campaign and media plan.

2. Select DSP Actions > Pixels on the upper-right corner of the DSP line items to create the universal pixel for this advertiser.

   

3. Select the Universal Pixels tab.

   

4. Click Create universal pixel.

   

5. Enter a Pixel Name.

6. Click Create rule set.

   1. Click Add rule to create a new Key/String rule to capture this single page application event.

   

   2. Set the Type to Key/String and Operator to Exactly Matches.

      Keys and strings are case sensitive variables that are set to any alphanumeric values. They must exactly match the universal pixel’s rule set.

   3. Enter the Key and String. The variables for this scenario are page and availableplans.

      We don’t recommend leaving spaces in the key or string. They can render incorrectly as the pixel loads in the browser.

      

   4. Set the Audience to Available Plans Page_Audience to link the universal pixel to an audience. Link to at least one audience or conversion before saving your pixel.

7. Confirm that the Tag Type is set to Script. Using the script pixel lets users take advantage of user matching and cookieless conversion attribution.

   

8. Copy the Tag Code.

9. Click Save to create the universal pixel. This universal pixel is now ready to be placed in GTM.

To call the universal pixel tracking function:

1. Copy the universal pixel's Tag Code, then paste it in the HEAD or beginning of the BODY section of the page.

2. Call the cntrUpTag.track() function when the desired action happens, such as when the user clicks a button. One way to achieve this could be as follows:

   <button type="button" onclick="cntrUpTag.track('cntrData', '1234ab5678c9d')">Add to cart</button>

There are various ways to accomplish this, and the ideal solution may vary based on your website's code. Provide this information to a web developer to determine the best approach for your website.

To create the tag:

1. Log in to GTM.

2. From the Workspace tab, select Variables, then click Configure.

3. Click inside the Tag Configuration box to open the Choose tag type panel.

4. In the History section, enable all five variables.

   

5. Select the Tags tab, then click New.

6. Click inside the Tag Configuration box to open the Choose tag type panel.

7. In the Custom section, select Custom HTML.

   

8. Paste your universal pixel’s tag code into the HTML box.

9. Add the Key and String amendment to the tag code.

   • The following screenshot is an example:

     

   

10. Click Save to create a new tag for your universal pixel.

After creating the tag, create and apply the trigger to your universal pixel. A trigger scans the web page or mobile app for certain types of events like form submissions, button clicks, or page views. The trigger tells the tag to fire when it detects the specified event. Every tag must have at least one trigger to fire. See Google's About Triggers page for more information.

To create and apply the trigger:

1. From GTM’s Workspace tab, click Preview to identify the triggering variables that fire the single page application. Tag Assistant opens.

   Tag Assistant helps you verify that you have installed various Google tags correctly on your page. Tag Assistant tells you which tags are present, reports any errors, and suggests improvements that can be made to your implementation. See Google's Tag Assistant page for more information.

   

2. In the Your website’s URL field, enter the URL of the page where the application submission button is located.

   

3. Click Connect. A window opens with the specified page.

4. Click Continue.

5. In the window with the specified page, fill out the Personalized Quote application, then click Get My Quote.

   

6. In Tag Assistant’s Summary panel, locate and select the first History event, which is numbered and grouped with the page where the click occurred. Since you only clicked once, you know this is the single page application event associated with the Available Plans page.

7. Select the Variables tab to locate the triggering variables. In this case, look for Page Path. We recommend taking a screenshot of the variables to use as a reference when creating a new trigger.

   

8. From GTM’s Workspace tab, select Triggers.

9. Click New to create the new trigger.

   

10. Click inside the Tag Configuration box to open the Choose trigger type panel.

11. In the Other section, select History Change.

12. Select Some History Changes to set what the trigger fires on.

13. Set the trigger conditions to Page Path and equals. Refer to your screenshot for the third condition, /s/available-plans.

    

14. Click Save.

15. Enter a Trigger Name, then click Save to create the new trigger.

16. After creating the trigger, apply it to the universal pixel.

    1. From the Workspace tab, select Tags.
    2. Select the new tag.
    3. Click inside the Triggering box.
    4. Click + to apply the new trigger.
    5. Click the Search icon, then enter the trigger’s name.
    6. Select the trigger.

    

    7. Click Save. The trigger is applied to your universal pixel. You’re now tracking a specific single page application event with a universal pixel.