How to Re-Run the Invoca Tag in Google Tag Manager

[InvocaKnowledge]

Applies To

By default, the Invoca tag automatically functions upon the initial page load. However, many modern websites load content and components dynamically after the initial page load (e.g., via AJAX, single-page application transitions).

To ensure Invoca can correctly identify and replace phone numbers within these dynamically loaded elements, you must manually trigger a re-scan of the page using the Invoca.PNAPI.run() function.

It can be achieved by using Google Tag Manager (GTM) and an Element Visibility Trigger. This setup ensures the re-scan runs precisely when the new, number-containing element becomes visible.

Step 1: Create an Element Visibility Trigger

Set up a GTM trigger that detects when the new, dynamically loaded element appears on the screen.

• In GTM, navigate to Triggers and select New.
• Choose Trigger Configuration and select the Element Visibility type.
• Under Selection Method, choose either ID or CSS Selector.
• In the Element Selector field, input the identifier for the dynamically loaded component:
  1. For an ID: Use the format #your-element-id
  2. For a CSS Class: Use the format .your-class-name
  3. For an Attribute: Use the format [data-invoca-target="true"]
• Set the trigger to fire: Every time an element appears on-screen.
• Check the Observe DOM changes box. This is crucial as it allows the trigger to track elements that appear as the page's structure changes dynamically.
• Give the trigger a clear name (e.g., Invoca Re-Scan Trigger - Dynamic Component)

Step 2: Create a Custom HTML Tag

Create a Custom HTML Tag that contains the JavaScript code to initiate the Invoca re-scan, and link it to the trigger created in Step 1.

• In GTM, navigate to Tags and select New.
• Choose Tag Configuration and select the Custom HTML type.
• Paste the following JavaScript code into the HTML field:

<script>
  // Check if the Invoca object exists before attempting the run command
  if (window.Invoca) {
    Invoca.PNAPI.run();
  }
</script>

• Under Triggering, select the Element Visibility Trigger you created in Step 1.
• Give the tag a clear name (e.g., Invoca PNAPI Re-Run).
• Save the tag and Publish your GTM container changes.

This setup ensures that whenever the target element becomes visible, the Invoca tag re-scans the page, allowing it to successfully target and replace any phone numbers within that new content.