Manually trigger a re-scan with Invoca.PNAPI.run() when phone numbers load dynamically after the initial page load, using a GTM Element Visibility Trigger.
By default, the Invoca Tag runs automatically on initial page load. Many modern websites load content dynamically afterward — for example, via AJAX or single-page app transitions. This guide covers making sure Invoca can still find and replace phone numbers in that dynamically loaded content, using Google Tag Manager (GTM).
Step 1: Create an Element Visibility Trigger
- In Google Tag Manager, go to Triggers, then New.
- Choose Trigger Configuration, then the Element Visibility type.
- Under Selection Method, choose ID or CSS Selector.
- In the Element Selector field, enter the identifier for the dynamically loaded element:
- ID:
#your-element-id - CSS Class:
.your-class-name - Attribute:
[data-invoca-target="true"] - HTML tag name (like
main,header, orfooter): just the word itself, with no dots or hashes
- ID:
- Set the trigger to fire every time an element appears on-screen.
- Check Observe DOM changes, so the trigger can track elements that appear as the page’s structure changes dynamically.
- Name the trigger clearly (for example, “Invoca Re-Scan Trigger - Dynamic Component”).
Step 2: Create a Custom HTML Tag
- In GTM, go to Tags, then New.
- Choose Tag Configuration, then the Custom HTML type.
- Paste the following:
- Under Triggering, select the Element Visibility Trigger from Step 1.
- Name the tag clearly (for example, “Invoca PNAPI Re-Run”).
- Save the tag and publish your GTM container changes.
Step 3: Verify the firing
- Open your website in GTM Preview Mode.
- Trigger the action that makes the dynamic component appear.
- Look for the “Element Visibility” event in the summary pane.
- Click the event and confirm your “Invoca PNAPI Re-Run” tag shows under “Tags Fired.”
- If the event fires but the tag shows “Not Fired,” click into the tag to see which firing filter failed — usually an ID/CSS selector mismatch.