Generated gh-pages for commit b3bc8cb

Author: Vitalii Oliinyk <[email protected]>

    [PR-21010][Page Loading Time] Documentation for integration with Google Tag Manager (#334)

_sources/integration/custom/integration_tag_manager.rst.txt

@@ -41,6 +41,22 @@ This section addresses two key considerations for integrating Talkable using Goo
 
 - A known issue exists where Safari in private mode blocks third-party vendors, including GTM. This can prevent the Talkable integration code from loading entirely, hindering the referral program's operation.
 
+Best Practices for Speed Optimization
+-------------------------------------
+
+1. One sure way to optimize the load speed would be to change the :ref:`Talkable Initialization script <integration/custom/integration_components>` placement on the page. If the Talkable script tag is located at the bottom of the page and doesn’t have the “async” attribute, it would wait for other scripts to load first. Adding the attribute to the script and moving it higher in the body or to the head (even better) will prioritize the load.
+
+2. Make sure the campaign uses optimized image/file sizes and upload lower-resolution versions if it is.
+
+3. There should be only one copy of the Initialization script on the page. Delete all duplicates if there are any.
+
+4. Make sure you don't have JS errors from code executed before Talkable. If there is some critical error, the browser may not be able to process Talkable scripts quickly.
+
+.. note:: 
+   If you use GTM, you can add `priority <https://support.google.com/tagmanager/answer/2772421>`_ to the tag. The higher the priority, the quicker it gets loaded.
+
+   .. image:: /_static/img/gtm-priority.png
+
 Alternative Approach: Direct Integration
 ----------------------------------------
 
@@ -74,3 +90,13 @@ If you've decided to remove the Talkable integration script from GTM, follow the
 4. Click the "Delete" button to remove the Talkable integration tag.
 
 **Important Note:** After removing the Talkable integration script from GTM, you'll need to implement the :ref:`direct integration approach <integration/custom/integration_components>` documented earlier to ensure Talkable functionality on your website.
+
+.. note::
+   Talkable doesn't recommend adding integration as tags in Google Tag Manager because of slow loading of campaigns for certain user agents as well as GTM being blocked by some Ad blockers
+
+Helpful Links
+-------------
+
+- `How to make campaigns load faster? <https://talkable.freshdesk.com/support/solutions/articles/43000682297-how-to-make-campaigns-load-faster->`_
+- `How to integrate with a Tag Manager <https://talkable.freshdesk.com/support/solutions/articles/43000628861-how-to-integrate-with-a-tag-manager>`_
+- `GTM tag prioritization <https://support.google.com/tagmanager/answer/2772421>`_

integration/custom/integration_components.html

@@ -302,8 +302,10 @@ <h3>Referral Dashboard Notes<a class="headerlink" href="#referral-dashboard-note
 <li class="toctree-l1"><a class="reference internal" href="alternate_post_purchase.html">Alternate Post Purchase Script for cart line item passing</a></li>
 <li class="toctree-l1"><a class="reference internal" href="integration_tag_manager.html">Integrating with a Tag Manager</a><ul>
 <li class="toctree-l2"><a class="reference internal" href="integration_tag_manager.html#potential-performance-impact">Potential Performance Impact</a></li>
+<li class="toctree-l2"><a class="reference internal" href="integration_tag_manager.html#best-practices-for-speed-optimization">Best Practices for Speed Optimization</a></li>
 <li class="toctree-l2"><a class="reference internal" href="integration_tag_manager.html#alternative-approach-direct-integration">Alternative Approach: Direct Integration</a></li>
 <li class="toctree-l2"><a class="reference internal" href="integration_tag_manager.html#removing-the-talkable-integration-script-from-gtm">Removing the Talkable Integration Script from GTM</a></li>
+<li class="toctree-l2"><a class="reference internal" href="integration_tag_manager.html#helpful-links">Helpful Links</a></li>
 </ul>
 </li>
 </ul>

integration/custom/integration_tag_manager.html

@@ -126,6 +126,20 @@ <h2>Potential Performance Impact<a class="headerlink" href="#potential-performan
 <li><p>A known issue exists where Safari in private mode blocks third-party vendors, including GTM. This can prevent the Talkable integration code from loading entirely, hindering the referral program’s operation.</p></li>
 </ul>
 </section>
+<section id="best-practices-for-speed-optimization">
+<h2>Best Practices for Speed Optimization<a class="headerlink" href="#best-practices-for-speed-optimization" title="Link to this heading">¶</a></h2>
+<ol class="arabic simple">
+<li><p>One sure way to optimize the load speed would be to change the <a class="reference internal" href="integration_components.html#integration-custom-integration-components"><span class="std std-ref">Talkable Initialization script</span></a> placement on the page. If the Talkable script tag is located at the bottom of the page and doesn’t have the “async” attribute, it would wait for other scripts to load first. Adding the attribute to the script and moving it higher in the body or to the head (even better) will prioritize the load.</p></li>
+<li><p>Make sure the campaign uses optimized image/file sizes and upload lower-resolution versions if it is.</p></li>
+<li><p>There should be only one copy of the Initialization script on the page. Delete all duplicates if there are any.</p></li>
+<li><p>Make sure you don’t have JS errors from code executed before Talkable. If there is some critical error, the browser may not be able to process Talkable scripts quickly.</p></li>
+</ol>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>If you use GTM, you can add <a class="reference external" rel="nofollow" href="https://support.google.com/tagmanager/answer/2772421">priority</a> to the tag. The higher the priority, the quicker it gets loaded.</p>
+<img alt="../../_images/gtm-priority.png" src="../../_images/gtm-priority.png" />
+</div>
+</section>
 <section id="alternative-approach-direct-integration">
 <h2>Alternative Approach: Direct Integration<a class="headerlink" href="#alternative-approach-direct-integration" title="Link to this heading">¶</a></h2>
 <p>To mitigate these potential issues, you can integrate Talkable directly into your web pages without using GTM. Here’s a step-by-step guide on <a class="reference internal" href="integration_components.html#integration-custom-integration-components"><span class="std std-ref">Custom Integration</span></a>.</p>
@@ -156,6 +170,18 @@ <h2>Removing the Talkable Integration Script from GTM<a class="headerlink" href=
 <li><p>Click the “Delete” button to remove the Talkable integration tag.</p></li>
 </ol>
 <p><strong>Important Note:</strong> After removing the Talkable integration script from GTM, you’ll need to implement the <a class="reference internal" href="integration_components.html#integration-custom-integration-components"><span class="std std-ref">direct integration approach</span></a> documented earlier to ensure Talkable functionality on your website.</p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>Talkable doesn’t recommend adding integration as tags in Google Tag Manager because of slow loading of campaigns for certain user agents as well as GTM being blocked by some Ad blockers</p>
+</div>
+</section>
+<section id="helpful-links">
+<h2>Helpful Links<a class="headerlink" href="#helpful-links" title="Link to this heading">¶</a></h2>
+<ul class="simple">
+<li><p><a class="reference external" rel="nofollow" href="https://talkable.freshdesk.com/support/solutions/articles/43000682297-how-to-make-campaigns-load-faster-">How to make campaigns load faster?</a></p></li>
+<li><p><a class="reference external" rel="nofollow" href="https://talkable.freshdesk.com/support/solutions/articles/43000628861-how-to-integrate-with-a-tag-manager">How to integrate with a Tag Manager</a></p></li>
+<li><p><a class="reference external" rel="nofollow" href="https://support.google.com/tagmanager/answer/2772421">GTM tag prioritization</a></p></li>
+</ul>
 </section>
 </section>
 

integration/custom_integration.html

@@ -132,8 +132,10 @@ <h2 class="mts">Integration High Level Overview</h2><ol class="arabic simple">
 <li class="toctree-l4"><a class="reference internal" href="custom/alternate_post_purchase.html">Alternate Post Purchase Script for cart line item passing</a></li>
 <li class="toctree-l4"><a class="reference internal" href="custom/integration_tag_manager.html">Integrating with a Tag Manager</a><ul>
 <li class="toctree-l5"><a class="reference internal" href="custom/integration_tag_manager.html#potential-performance-impact">Potential Performance Impact</a></li>
+<li class="toctree-l5"><a class="reference internal" href="custom/integration_tag_manager.html#best-practices-for-speed-optimization">Best Practices for Speed Optimization</a></li>
 <li class="toctree-l5"><a class="reference internal" href="custom/integration_tag_manager.html#alternative-approach-direct-integration">Alternative Approach: Direct Integration</a></li>
 <li class="toctree-l5"><a class="reference internal" href="custom/integration_tag_manager.html#removing-the-talkable-integration-script-from-gtm">Removing the Talkable Integration Script from GTM</a></li>
+<li class="toctree-l5"><a class="reference internal" href="custom/integration_tag_manager.html#helpful-links">Helpful Links</a></li>
 </ul>
 </li>
 </ul>